Enhance the layout of your dropdown list based on the HTML <select> tag. The following CSS code will NOT affect the layout and usability of your forms in other browsers then Firefox since only Mozilla’s Gecko layout engine seems to support custom styling on the <option> tags.
<div class="select">
<label for="thisField"><abbr class="required">*</abbr>Select field</label>
<select id="thisField" name="thisField" required="required" title="Select an option">
<option value=""></option>
<option value="01">Option 01</option>
<option value="02">Option 02 lorem ipsum dolor sit amet</option>
<option value="03">Option 03</option>
</select>
</div><!-- /.altSelect -->
</div><!-- /.select -->
select {
padding-top: .3em;
padding-bottom: .3em;
}
select option {
border-bottom: 1px dotted #CCC; /*-moz-*/
background-color: white;
}
select option:focus {
outline-width: thin; /*-webkit-*/
}
select option:before {
content: "\2022\0020"; /*-moz- Adds a bullet before each line*/
}
The following style should only target an option where NO values are declared: <option value=""> or <option value="-1">
select option[value=""],
select option[value="-1"] {
font-style: italic;
opacity: .7;
background-color: #EEE;
}
select option[value=""]:before,
select option[value="-1"]:before {
content: "\2193\0020Please select one of these options"; /*-moz- only*/
color: #EEE;
}
HTML5 requires to set a lang value on the <html> tag. Let’s use it for my French Canadian translation example.
select option[value=""]:lang(fr-CA):before,
select option[value="-1"]:lang(fr-CA):before {
content: "\2193\0020Veuillez choisir parmi ces options"; /*-moz- only*/
}
End result examples
Here are screen capture images from 3 major browsers.
Mozilla Firefox
Google Chrome
Microsoft Internet Explorer 9
You must be logged in to post a comment.