CSS:
select {
float:left;
background:url(../images/bg_search_sml.png) top left repeat-x;
border:none;
width:200px;
font:15px Arial, Helvetica, sans-serif;
letter-spacing:-1px;
padding:7px 0 10px;
}
option {
height:auto;
outline:none;
border:none;
}
Why only opera and IE6 has problems with this tag. What i must do in opera and IE6 that tag will work like in IE7,8 or FF. Code forr CSS is up.
regards
Styling form elements consistently with pure CSS across every browser is more or less impossible. The reason is that, to some degree, elements like form controls and scrollbars are considered part of the operating system (Windows, OS X, etc.) interface. After that, the way they look is further determined by each individual browser. Each browser then allows only some aspects of some form controls to be manipulated with CSS. They do not implement this in a standard way across each browser.
As jcubic mentioned in a comment, you can use JavaScript (like Dojo Toolkit does) to create custom form elements. However, you need to be aware that with <select> elements, this is usually accomplished by replacing the <select> with a text <input>. Then JavaScript is used to add functionality that attempts to mimic a real <select>. While this sounds fine in theory, the functionality never fully matches a real <select> and tends to create usability concerns because these custom elements don't quite behave the way users expect a <select> to work.
The best advice you'll ever get is just find a way to incorporate the default form control appearance into your design.