I want to change the default appearance of the arrow of a dropdown list so that looks the same across browsers. Is there a way to override the default look and feel of the drop down arrow using CSS or otherwise ?
+5
A:
No, cross-browser form custimization is very hard if not impossible to get it right for all browsers. If you really care about the appearance of those widgets you should use a javascript implementation.
see http://www.456bereastreet.com/archive/200409/styling_form_controls/ and http://developer.yahoo.com/yui/examples/button/btn_example07.html
Tomh
2009-03-04 17:00:26
A:
The <select> element is generated by the application and styling is not part of the CSS/HTML spec.
You would have to fake it with your own DIV and overlay it on top of the existing one, or build your own control emulating the same functionality.
Diodeus
2009-03-04 17:01:26
A:
No, you can't do it by using an actual <select>, but there are techniques that allow you to "replace" them with javascript solutions that look better.
Here's a good article on the topic: <select> Something New
Chad Birch
2009-03-04 17:02:32
A:
Unless you plan on creating your own drop down list (and not using a standard library drop down list), you are stuck. The DDL control's look is going to be based upon the system you are running and/or the browser that is rendering the output.
TheTXI
2009-03-04 17:02:50
+1
A:
Not easily done I am afraid. The problem is Css cannot replace the arrow in a select as this is rendered by the browser. But you can build a new control from div and input elements and Javascript to perform the same function as the select.
Try looking at some of the autocomplete plugins for Jquery for example.
Otherwise there is some info on the select element here:
http://www.devarticles.com/c/a/Web-Style-Sheets/Taming-the-Select/
Richard
2009-03-04 17:07:57