Form element <select> and CSS
Form element select belongs to those very hardly stylish elements namely thanks to browser IE. While on Internet is not very frequent used, on intranet select is fundamental form element, which is used for option selection from database codebooks (names, machines, prouction lines).
Element select can work as choice possibility one from many, or more from many. Alike operate elements radio, or checkbutton. Element select occupies essentially less space and is suitable for compact forms, but is less transparent. In his basic shape is visible only selected option, other options are hidden.
<select> ... </select>
.dimensions {width: 100px; height: 22px;}
.borderless {width: 100px; height: 18px; border: none;}
.background {width: 100px; height: 18px; background: #ffa;}
.scontainer {position: relative; width: 100px; height: 18px;
top:0; left:0; overflow: hidden;}
.experiment {position: absolute; width: 104px; height: 22px;
top: -2px; left: -2px; background: #ffa;}
For getting of screenshots was used browser FireFox 3.0.b1. In older versions of FireFox setting height of select element caused rendered element 2 pixel higher than required. Beta version 3 is already corrected.
Default display of element, without any specified proportions, size of element select is evolved from type and size of used font and length of text in element option. In example proportions were following: IE7 62x22, IE6 61x22, FF 65x22, Opera 57x20, Safari 66x22 pixels. Then no coincidence.
Let's try to set proportions by the help of style. Property margin: 0; has no visible effect. Other property padding: 0; causes decreasing general height of element from 20px to 18px in Opera, then button and bottom edge of element merges with border, which looks strange.
Setting dimensions width: 100px; height: 22px; was successful in all browsers. Small exception is Safari, where it is difficult to indicate resulting proportion, because of shadow. Specified dimensions are external final dimensions, regardless of set-up border and padding. For example element textarea calculates outer dimmensions in another way.
Now let's try to remove border. Set-up width: 100px; height: 18px; border: none; height is adjusted to 18 pixels, it means 2+2 pixels lower than natural default element height for used font. How is their habit, IE sulks, other browsers are conformable.
Setting CSS style property background evokes switch-over of element select to the appearance type Classic. Coincidence in appearance and proportions are sufficient for others experiments.
Screenshots of experimental element select after removing border. Detailed description of method and live examples are in article select experiment.
For another study especially problems of elements option and optiongroup I recommend live examples of stylish element select.
Opened element select
A few screenshots how does it look like when element select is open, to see how text length influences element proportion.
<select size="5" style="width: 100px;"> ... </select> <select style="width: 80px;"> ... </select>
Permanently opened element select has following proportions (dependent upon font): IE7 100x86, IE6 98x84, FireFox 100x86, Opera 100x94, Safari 102x85. Proportion agreement, nothing too much. Important is text cut off in all browsers so as to keep specified width element. That it can be risky in case when lenth of text in elements option is not known in advance.
For screenshots of dynamically opened element select the width of element is reduced to width: 80px. Standard browsers open option to were readable all over the width. IE opens element only to the width appointed for select, and it is not possible to increase that e.g .. option {width: 100px;}.
Atributes of element select
<select name="..." size="5" multiple="multiple" >
Only attributes specific for form element select are mentioned. Other common attributes (e.g .. class) are omited.
name="..."
Name is mandatory attribute and have to be implemented as unique identifier. Missing attribute name causes that content of that element is not submitted.
size="5"
By using attribute size constantly open element select is created. Value designates how much rows is permanent visible. Default value is size="1", so dynamically opened element.
multiple="multiple"
Attribute multiple enable to choose more options in one element by the help of keyboard keys Ctrl, or Shift and mouse click. Likewise files selection in Windows Explorer is done. Adjacent effect of multiple attribute is constantly opened element in IE, FireFox and Safari. Opera leaves in closed element, but change the view of simple openning button to double one.
Select element and z-index
Following screenshot illustrate different behavior of select element in different browsers. Drop down menu would have been up, above form. In IE6 browser 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 27.12.2007