Tag: AUI Astral

Custom drop-down select tag using only CSS

Graphic illustration of the alternative select drop-down
A 100% CSS method to customize the layout of HTML
 

The required HTML markup

<div class="select">
    <div class="altSelect">
        <select name="dropdownSelect" title="Select an option">
            <option value="-1" class="first">-</option>
            <option value="1">Option 1 </option>
            <option value="2">Option 2 minutes</option>
            <option value="3">Option 3 hours</option>
            <option value="4">Option 4 very long days</option>
            <option value="5">Option 5 weeks</option>
            <option value="6">Option 6 month</option>
            <option value="7">Option 7 years</option>
            <option value="8">Long option 8 lorem ipsum</option>
            <option value="9">Option 9 centiries</option>
        </select>
        <span class="arrow" title="&larr; edit"></span>
    </div>
</div>

The style

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 us 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*/
}

Support for Internet Explorer

Using this CSS hack is not what I would recommend, but it allowed me to isolate the display on the span ONLY to Microsoft’s browser without requiring the complex management of conditional comments in the customer’s CMS.

div.select .altSelect:hover {
	background-image: none\9; /*ie9Hack : hide the arrow in background*/
}
.select .altSelect span.arrow {
	display: block\9; /*ie9Hack : show the arrow in foreground, over the <select>*/
}
div.select .altSelect:hover span.arrow {
	background-position: right -349px\9; /*ie9Hack*/
}
div.select .altSelect:hover span.arrow:hover {
	background-position: right 1px\9; /*ie9Hack*/
}

Styled option tag layout in IE9