Why has SELECT different height if only one empty option exists? - html

Question

In this sample http://jsfiddle.net/2SuN8/1/
<select>
<option value="0"></option>
</select>
<select>
<option value="0"></option>
<option value="1">A</option>
</select>
there is a 1px height difference between those two drop-downs.
I assume this happens when one select contains only one empty option.
Should I avoid empty default options or do You know any way to work around this?
I've seen this issue in FF 27.0.1 (Ubuntu 13.10 and Windows Server 2008) and with IE 10 (Windows Server 2008).
Thanks
Hannes

Answer 1

This is happening because you aren't specifying a height for the select element, so by default its height is determined by its content. In the case of your select element with only one empty option, as there is no content, there is no height.
CSS Solution
The CSS solution would be to simply add a default height to your select element:
select {
height: 20px;
}
JSFiddle demo.
HTML Solution
The HTML solution, as mentioned by others here, is to populate your empty option with some content:
<select>
<option value="0"> </option>
</select>
JSFiddle demo.
In this case, is the non-breaking space entity.
Personally I'd go with the CSS option.

Answer 2

now there is no different height :D
change
<option value="0"></option>
to
<option value="0"> </option>
http://jsfiddle.net/2SuN8/2/

Answer 3

Yes, you should avoid empty select options. Instead you can set empty value for first option.:
<select>
<option value=""> - - select - -</option>
<option value="a"> A </option>
<option value="b"> B </option>
</select>

Answer 4

Set the width and/or the height and they will be the same size.
<select style="width:100px; height:20px;">
<option value="0"></option>
</select>
<select style="width:100px; height:20px;">
<option value="0"></option>
<option value="1">A</option>
<option value="2">B</option>
</select>
Edit: My version is the quick and dirty version, if you want the right way to do it, use a separate CSS file or a space substitute as others have described.

Answer 5

The reason that it happens is that in some browsers (for example Firexox) the select element for some reason will grow to accomodate its largest option value, eventhough the value may not be shown in the select in the same way as in the option.
For example:
<select>
<option value="0"></option>
</select>
<select>
<option value="0"></option>
<option value="1">A</option>
<option value="2" style="font-size:20px">B</option>
</select>
Demo: http://jsfiddle.net/Guffa/2SuN8/3/
In firefox the select element will be tall enough to accomodate a 20px text, but if you choose the option B it will not be shown with the font size specified for the option, but with the font size specified for the select.
One workaround would be to set a specific height to the select. A workaround for the specific case of the empty option could be to use a space inside it, like Sharky showed.