CSS Flat Form Controls

Ok, this can be used with text fields and buttons:

Code:

---

.Box
{
    BORDER-RIGHT: 1px solid;
    BORDER-TOP: 1px solid;
    FONT-SIZE: 11px;
    BORDER-LEFT: 1px solid;
    BORDER-BOTTOM: 1px solid;
    FONT-FAMILY: Verdana;
    BACKGROUND-COLOR: #ffffff
}

---

Is there any way to do it with select boxes?
Thanks

It all depends on whether or not the browser draws the select box itself or relies on Widgets from the underlying OS. IIRC, Mozilla does the former while IE does the latter.

So basically it is just IE being stupid? Great!

Opera doesnt do it either.

IE counts certain form elements as windows controls and are drawn by the Operating System rather than the browser. They also get priority on the page, thats why you can position a Layer above a <select>

Why does it draw the text fields and buttons itself then, and not the list box? It just seems pointless. :(

I have a feeling its got something to do with a dropdown listbox being animated i.e. clicking on it and more options are dropped. They'll probably sort it out an a later version, or with the release of IE with CSS2 support.