Form element <select> and CSS
While on Internet select element is not used frequently, on intranet select is important form element, which is used for option selection from database codebooks (names, machines, prouction lines). Possibilities of using CSS for styling of this element are presented in this article.
Similar functions as element select provide also form elements radio, or checkbutton. Select element however occupies minimum space. In its basic shape is visible only selected option, others are hidden.
Example of live select elements completed by applied HTML and CSS code follows. Further you can find screenshots of that examples in common browsers. By this way it is possible to compare element face in your actual browser with screenshots from other browsers.
|
| select {font: normal 13px Arial, SansSerif;} <select> ... </select> | |
|
| .se1 {width: 92px; height: 22px;}
<select class="se1" disabled> ... </select> | |
|
| .se2 {width: 92px; height: 22px; color: #c00; border: 1px solid #c00;} <select class="se2"> ... </select> | |
|
| .se3 {width: 92px; height: 22px; background: #ffa;} <select class="se3"> ... </select> | |
|
| .se4 {width: 92px; height: 18px; border: 0;}
<select class="se4"> ... </select> | |
|
| .se5 {width: 92px;}
<select size="5" class="se5"> ... </select> | |
|
| .se6 {width: 92px; height: 22px;}
<select size="4" class="se6"> ... </select> |
IE version 6 and 7 render select identically, depending on Windows motive. That means without any effect on border. It is nice to see select element working as expected in IE8RC1. In case of FireFox, element face partly depends on set up Windows motive, here is screenshot of FireFox in motive XP.
The first line of screenshots displays default look of select without any CSS class used. Element width is derived from the longest text in elements option, the height is established by used font. Font used in form elements is not inherited, therefore have to be declared separately.
Now element size is set by the help of CSS properties to width: 92px; height: 22px; and at the same time status disabled is set up by attribute. Element select emulates traditional box model, not standard W3C box model. Therefore adjusted size is applied to outside dimensions, values of border and padding are not applied. More in article form box model. Safari in this case keeps desired width, but breaks the height, even makes smaller specified font size.
In the third row of screenshots is set-up red text and red border width of 1 pixel. You can see that browsers IE6 and IE7 are not able to work with the border of element select. IE8 RC1 renders border the same way as standard browsers do. Other difference, not visible in screenshots, is the width of rolled out part of element. Standard browsers roll out option items so that to were readable all over its width. IE6 + 7 roll out options only to the width of select element.
Unwritten rule at form element rendering is possibility to switch to the classic look by the help of CSS style background. Element select in browsers IE and Safari fail to satisfy this practise. Screenshot of Safari captures element which has focus.
Now, border of element is removed by the help of CSS property border: 0;. Again IE fails to remove border. When you really need to remove select border, try to use method described in article select experiment.
Rolled out element select
Always unwrapped select element is obtained by utilization of attribute size. Attribute value determines how much lines (option elements) are visible. This way set up height is not the same across browsers. We can get precision height by using CSS property height (together with size attribute). In this case property height means a bit different proportion, then the height without attribute size. Be careful when you define the width of element. Long text in all browsers is cut off.
The last row of screenshots represent interesting combination of rolled out element with CSS height set to one line. By that way some browsers create element similar to spin control. It is not possible to roll out it, but it is possible to select desired option by help of pair buttons up and down, or by help of cursor keys. That would be nice to have standardized spin form element for set numbers without the need of validation.
Other subject, not described here, are elements option and optiongroup and related CSS properties. You can visit live example of styling elements select and nested elements option and optiongroup.
Atributes of element select
<select name="..." size="5" multiple="multiple" >
<option value="1" selected="selected">PICK 1</option>
...
</select>
name="..." Name is optional attribute, but omitting causes that element content is not submitted to server. When used, name value should be implemented as unique identifier.
size="5" By using attribute size permanently open element select is created. Value designates how much rows are visible. Default value is size="1", what means dynamically opened element.
multiple="multiple" Attribute multiple enable to select more options in one element select by help of keys Ctrl, or Shift and mouse click. Likewise files selection in Windows Explorer is done. Additional effect of multiple attribute is permanently opened element in IE, FireFox and Safari. Opera retains closed element, but changes the face of simple openning button to double one.
value="1" value in element option indicates that value, which is going to be sent to server in case this item is selected. Submitted data are in pattern select name=option value. Value content can be text, or number. In case when select element is used for selection item from database codebook, value can contain record ID, text in options can contain item name.
selected="selected" When edit existing database record, use this attribute in element option to specify original, saved option. When new record is created, use this attribute to mark default value. If selected attribute is used, then usually no validation of select element is required, because there is no way how to deselect option.
Syntax of attributes multiple and selected mentioned above are for XHTML code. Standard HTML code use simple word declaration: multiple, or selected only.
Select element and z-index
Following screenshot indicates different behavior of select element in some browsers. Drop down menu would have been up, above form. In IE6 part of drop down menu is unreadable due to overlaping by select element. This defect occurs only in browser IE6 and older.
In that case does not help to set z-index, select element in IE6 and less always "floats up", no matter what do you do.
updated 02.02.2009