3 thumbs up

Css style of a select box

How can I change with CSS the style of a select box (drop down)?

I want to change the look of the arrow, the border, colors ets.


Would you like to answer or comment?

Sign up for a free account, or sign in (if you're already a member).
Share Send to a friend Watch Report
 
 

Posted Answers

Order by
 

I found this site to answer most of the form style/design questions I had .. http://jeffhowden.com/code/css/forms/


Posted 11 months ago ( permalink )
In reply to ilana's question
masprema was invited by Yedda to answer this question.

Rated as
#3 out of 7
0
0

Helpful?

line
line
line



 

A number of different style properties on <select> elements can be affected with CSS, although a lot of what you can do to change the look of a select box is achieved by changing the style of the inner <option> elements - e.g. the padding, border, background-color, font-size, etc.

By including class names on different option elements, you can achieve interesting affects. E.g. every alternative option element may have the class 'alt' - then you might have something in the CSS like:

select option {
     background-color: #ffe;
}

select option.alt {
    background-color: #eff;
}

The arrow of the select box is determined by the browser and operating system and is not affected by CSS. The only way you could change it would be to use some JavaScript to script your very own 'select box' from, say, <li> elements.


Posted 11 months ago ( permalink )
In reply to ilana's question
Premasagar was invited by Yedda to answer this question.

Rated as
#4 out of 7
0
0

Helpful?

line
line
line



 
9 thumbs up

Check this site we made, and the way the [ul] is styled.

http://www.actionchaos.com/chaos/do/type/NEWS/getArticleList.html


Posted 11 months ago ( permalink )
In reply to ilana's question
blonkm was invited by Yedda to answer this question.

Rated as
#2 out of 7
0
1

Helpful?

line
line
line



 
2 thumbs up

changing the cursor is easy with its css properties :

http://www.w3schools.com/css/pr_class_cursor.asp

changing the look and feel of the select is done by styling both the SELECT and OPTION tags. the styling is very limited and may look different on various browser. thats why the best practice in web design is not to use the select. instead we use lists and award them with behavior using javascript.

you can check heep.co.il search drop down to fully understand the technique. 

also, here a few methods that should work as well:

http://www.tyssendesign.com.au/articles/css/dropdown-low-down/ 


Posted 11 months ago ( permalink )
In reply to ilana's question
Rated as
Best Answer
0
2

Helpful?

line
line
line



 
3 thumbs up

it looks nice. thank you


Posted 11 months ago ( permalink )
In reply to blonkm's answer
Rated as
#5 out of 7
0
0

Helpful?