styling a select box (can't really)

by jorgeluis

HTML

<label for="options">Options</label>
<select id="options" class="select--stylish">
	<option value="">Choose from 5 options</option>
	<option class="muted" value="">Red Currently unavailable</option>
	<option value="456">Blue</option>
	<option class="muted" value="">Mint Currently unavailable</option>
	<option value="123">Black</option>
</select>

CSS

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
    padding: 1em;
}


/* styling option isn't really possible */
option {
    padding: 0.5em;
    color: white;
    background-color: black;
}
.muted {
    color: #777;
    background-color: #eee;
}