Pretty little CSS3 select box
Webkit Only 3D CSS3 select box
HTML
<!-- The HTML -->
<label>
<select>
<option selected> Select Box </option>
<option> Short Option </option>
<option style="cursor:not-allowed"> This Is A Longer Option </option>
</select>
</label>
CSS
/* JSFiddle CSS */
body, html {background:#444; text-align:center; padding:50px 0;}
/* The CSS */
select {
padding:3px;
margin: 0;
border-radius:4px;
-webkit-box-shadow:
0 3px 0 #ccc,
0 -1px #fff inset;
background: #f8f8f8;
color:#888;
border:none;
outline:none;
display: inline-block;
-webkit-appearance:none;
cursor:pointer;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
select {padding-right:18px}
label {position:relative}
label:after {
content:'<>';
font:11px "Consolas", monospace;
color:#aaa;
-webkit-transform:rotate(90deg);
position:absolute;
right:4px;
top:2px;
padding:0 0 2px;
pointer-events:none;
border-bottom:1px solid #ddd;
}
}