<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><title>Select Styling</title><link href="selectExample.css" rel="stylesheet"></head><body><select id="styledSelect" class="blueText"><option value="apple">Apple</option><option value="orange">Orange</option><option value="cherry">Cherry</option></select></body></html>
示例CSS文件（selectExample.css）：
/* All select elements on page */select {position: relative;}
/* Style by class. Effects the text of the contained options. */.blueText {color: #0000FF;}
/* Style by id. Effects position of the select drop down. */#styledSelect {left: 100px;}
select {-webkit-appearance: button;-moz-appearance: button;-webkit-user-select: none;-moz-user-select: none;-webkit-padding-end: 20px;-moz-padding-end: 20px;-webkit-padding-start: 2px;-moz-padding-start: 2px;background-color: #F07575; /* Fallback color if gradients are not supported */background-image: url(../images/select-arrow.png), -webkit-linear-gradient(top, #E5E5E5, #F4F4F4); /* For Chrome and Safari */background-image: url(../images/select-arrow.png), -moz-linear-gradient(top, #E5E5E5, #F4F4F4); /* For old Firefox (3.6 to 15) */background-image: url(../images/select-arrow.png), -ms-linear-gradient(top, #E5E5E5, #F4F4F4); /* For pre-releases of Internet Explorer 10*/background-image: url(../images/select-arrow.png), -o-linear-gradient(top, #E5E5E5, #F4F4F4); /* For old Opera (11.1 to 12.0) */background-image: url(../images/select-arrow.png), linear-gradient(to bottom, #E5E5E5, #F4F4F4); /* Standard syntax; must be last */background-position: center right;background-repeat: no-repeat;border: 1px solid #AAA;border-radius: 2px;box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);color: #555;font-size: inherit;margin: 0;overflow: hidden;padding-top: 2px;padding-bottom: 2px;text-overflow: ellipsis;white-space: nowrap;}
<select><option>So many options</option><option>...</option></select>
<select class="theme-pink"><option>So many options</option><option>...</option></select>
<select class="theme-construction"><option>So many options</option><option>...</option></select>
body {padding: 4em 40%;text-align: center;}
select {$bg-color: lightcyan;$text-color: black;appearance: none; // Using -prefix-free http://leaverou.github.io/prefixfree/background: {color: $bg-color;image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/1255/caret--down-15.png");position: right;repeat: no-repeat;}border: {color: mix($bg-color, black, 80%);radius: .2em;style: solid;width: 1px;right-color: mix($bg-color, black, 60%);bottom-color: mix($bg-color, black, 60%);}color: $text-color;padding: .33em .5em;width: 100%;}
// Removes default arrow for Internet Explorer 10 (and later)// Internet Explorer 8/9 gets the default arrow which covers the caret// image as long as the caret image is smaller than and positioned// behind the default arrowselect::-ms-expand {display: none;}
