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.
I found this site to answer most of the form style/design questions I had .. http://jeffhowden.com/code/css/forms/
The search for people who can answer your question continues for as long as needed - until you find the answer you were looking for.
When an answer is posted by someone who was invited (byYedda or by yourself) to answer your question, their answer is marked with a yellow "invited by Yedda".
To be invited to answer other people's questions in your areas of knowledge and interest, be sure to list your favorite topics:
» My Settings My Topics.
Of course, the more helpful your answers are, the more likely you are to be invited to future questions...
• Premasagar.com• Dharmafly
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.
Check this site we made, and the way the [ul] is styled.
http://www.actionchaos.com/chaos/do/type/NEWS/getArticleList.html
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/
it look nice. thank you
it looks nice. thank you
I am not sure how to do that, but I found this site www.yellow7.com that might be able to answer your question.
You cannot do that, at least not if you wish this style to be rendered in all browsers. I was trying to solve this problem on
Got an answer for ilana? Would you like to comment on the posted answers, or vote for the one which you think is the best?
Sign up for a free account, or sign in (if you're already a member).
Other people asked questions on similar topics, check out the answers they received: