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>
        <span class="arrow" title="&larr; edit"></span>

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. .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>*/
} .altSelect:hover span.arrow {
	background-position: right -349px\9; /*ie9Hack*/
} .altSelect:hover span.arrow:hover {
	background-position: right 1px\9; /*ie9Hack*/

Styled option tag layout in IE9


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.