CSS tips: Select CSS Control

It is not easy to use CSS for the select control!
Write width:? In the style :?? Px; this can be implemented.
Height :?? Px; this cannot be achieved. You can only change the height by adjusting the font size.
Background can be implemented, but it won't work with the background image.

The Select border is the default blue, and the CSS attributes with the border attribute cannot be changed. The border can be changed only through the disguised method. The following describes in detail:
Idea: first create a layer with the expected border, put the select in it, the Select size is slightly larger than the DIV, so that the content of the excess layer is hidden to cover the border that comes with the select.

<Div style = "border: solid 1px # ffcc00; width: 100px; Height: 20px; overflow: hidden;"> <select name = "select" style = "width: 105px; height: 25px; margin-left:-1px; margin-top:-1px; "Name =" select "> <option value =" 1 "> common member </option> <option value =" 2 "> Level 2 branch or local branch </option> <Option value = "3"> association </option> </SELECT> </div>

By using this method, select can have no border or change the border. however, this is only limited to the select list status. when it is displayed as a multiple status, there will be a deep box mark in IE, not in FF! Look, it's really hard to control!