CSS ONLY dropdown
by rdillman
HTML
<div>
<select>
<option>Something neat</option>
<option>Something else</option>
<option>And another thing</option>
</select>
</div>
CSS
div {
position:absolute;
top:5px;
left:5px;
}
div:before {
background: #ffffff;
background: -moz-linear-gradient(top, #ffffff 25%, #e7e7e7 50%, #e7e7e7 50%, #ffffff 75%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(25%,#ffffff), color-stop(50%,#e7e7e7), color-stop(50%,#e7e7e7), color-stop(75%,#ffffff));
background: -webkit-linear-gradient(top, #ffffff 25%,#e7e7e7 50%,#e7e7e7 50%,#ffffff 75%);
background: -o-linear-gradient(top, #ffffff 25%,#e7e7e7 50%,#e7e7e7 50%,#ffffff 75%);
background: -ms-linear-gradient(top, #ffffff 25%,#e7e7e7 50%,#e7e7e7 50%,#ffffff 75%);
background: linear-gradient(to bottom, #ffffff 25%,#e7e7e7 50%,#e7e7e7 50%,#ffffff 75%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=0 );
color: #777777;
content: "\25BC";
font-family: arial;
font-size: 15px;
font-weight: bold;
height: 16px;
padding: 11px;
pointer-events: none;
position: absolute;
right: 0;
text-decoration: none;
text-shadow: 1px 1px 0 #FFFFFF;
top: 0;
width: 15px;
z-index: 999;
border:1px solid #dcdcdc;
-webkit-border-top-right-radius: 6px;
-webkit-border-bottom-right-radius: 6px;
-moz-border-radius-topright: 6px;
-moz-border-radius-bottomright: 6px;
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
}
div:hover:before{
background: #e7e7e7;
background: -moz-linear-gradient(top, #e7e7e7 25%, #ffffff 50%, #ffffff 50%, #e7e7e7 75%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(25%,#ffffff), color-stop(50%,#ffffff), color-stop(50%,#ffffff), color-stop(75%,#e7e7e7));
background: -webkit-linear-gradient(top, #e7e7e7 25%,#ffffff 50%,#ffffff 50%,#e7e7e7 75%);
background: -o-linear-gradient(top, #e7e7e7 25%,#ffffff 50%,#ffffff 50%,#e7e7e7 75%);
background: -ms-linear-gradient(top, #e7e7e7 25%,#ffffff...