Enhance drop-down options layout for Firefox

Select field

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

Styled option tag layout in Mozilla Firefox browser

Google Chrome

Styled option tag layout in Google Chrome browser

Microsoft Internet Explorer 9

Styled option tag layout in Microsoft IE9 browser

Martin

Author: Martin

As an internet artisan I like to deepen my mastery of this medium to better translate the beauty of the present moment with you … While making a living out of it.