How to make select inputs look the same in all browsers on all platforms?

i'm solving a problem to make select inputs look the same in all browsers (Chrome and Safari on Mac renders them differently) how开发者_如何学编程 to do that ?

The ONLY way to make them look the same right now would be to hide the original inputs, and replace them with appropriately styled html equivalents (of god forbig Flash objects), which would act as proxies, passing the functionality over to the hidden inputs.

That may be automated with JavaScript. But that would be WRONG. You are not supposed to force a different look on to OS styled elements of the webpage. It conflicts with a lot of usability and accessibility practices.

So, the only way is to make your design flexible enough to support differently looking control elements on a web page, and also use different stylesets for different browsers, to ease the adjustment of the styles (at the moment there are no inputs that would look and act the same on all browsers with the same style rules applied).

Unfortunately, life just kinda sucks on this one. Just wait till you need to style a file input...now that's some fun!

if you dont mind using js you can simply design your own look (a jpg img it can even be the same img as the original select element or if you wish you can model parts of it in css) Then place a div on top of that image that div will contain the text which select element would usually contain

<div id="selectTxt" >

then set another div on top of that with the select element inside it.

<div id="transparentSelect" class="transparent"> 
<select id="selectCar" name="selectCar">
      <option>Volvo</option>
      <option>Saab</option>
      <option>Mercedes</option>
      <option>Audi</option>
    </select>  
</div>

Now the trick is to set the select element opacity to zero you can do this by adding by adding a class transparent and then applying the class to the div

.transparent
{
   filter:alpha(opacity=0); 
   -moz-opacity: 0; 
   opacity: 0; 
}

now the element is hidden but when you click on it the list will still show up. So the list will always look like the default list in the browser

now use js to extract the select value every time you click on the select and set the inner html of selectTxt div to its value. This way you get the text of the select on top of an image you want

you can make the image animated with the hover effect in css or with js

I also make a select that looks the same in all browsers but it doesnt work when you click directly on the arrow... so its an inferior version but if you wish to look at it here it is

http://jsfiddle.net/fiddlerOnDaRoof/LM73V/

it also lacks the arrow image but you can print screen that from your browser

good luck

You should apply a CSS to reset the styles (not just for the inputs, this is a highly recommended practice for all element so that your page looks almost the same in all browsers) there are many, just google a little, for example this one, and then apply your desired styles (border color and width, background, etc...) take a look at this tutorial on how to style form elements