Styled Select

dabblet.css

/**
 * Styled Select
 */

body {
	margin-top:200px;
	font-family:'proxima nova';
}

select {
	-webkit-appearance: menulist-button;
	margin:0px;
	padding:0px;
	opacity:0;
	min-width:120px;
	font-size:23px;
	whitespace:nowrap;
	text-overflow: ellipsis;
	border:none;
	outline:0;
	cursor: pointer;

}

div.selector span {
	position:absolute;
	padding:7px 10px;
	color:#464646;
	font-size:17px;
	font-weight:500;	
}


div.selector {
	
	display:inline-block;
	position:relative;
	font-size:20px;
	margin-right:10px;
	position:relative;
	
	border-radius:7px;
	border:1px solid rgba(117, 117, 117, .41);
	
	background: rgb(244,244,244); /* Old browsers */
	background: linear-gradient(top,  rgba(244,244,244,1) 0%,rgba(241,241,241,1) 49%,rgba(231,231,231,1) 50%,rgba(221,221,221,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4f4f4', endColorstr='#dddddd',GradientType=0 ); /* IE6-9 */
}

div.selector:before {
        width: 0;
        height: 0;
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        border-bottom: 4px dashed #555;
        position: absolute;
	content: "";
        top: 10px;
        right: 15px;
  }
  
div.selector:after {
        width: 0;
        height: 0;
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        border-top: 4px dashed #555;
        position: absolute;
        content: "";
        top: 15px;
        right:15px;
        
}


/*div.selector:hover, div.selector:active {
	box-shadow: 0px 0px 6px rgba(116,220,24,.4);
}*/


div.selector:active {
	
	box-shadow:inset 0px 5px 2px rgba(80, 80, 80, .1), 0px 0px 6px rgba(116,220,24,.4);
	
	background: rgb(215,215,215); /* Old browsers */
	background: linear-gradient(top, rgba(215,215,215,.5) 0%,rgba(242,242,242,.5) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d7d7d7', endColorstr='#f2f2f2',GradientType=0 ); /* IE6-9 */
}

dabblet.html

<fieldset>

<legend>Birthdate</legend>

<div class="selector">
<span>Month</span>
	<select name=month title="Month" required>
    	<option value=01>January</option>
    	<option value=02>February</option>
 	</select>
</div>

<div class="selector">
<span>Day</span>
	<select name=day title="Day" required>
    	<option value=01>1</option>
    	<option value=02>2</option>
	</select>
</div>

<div class="selector">
<span>Year</span>
	<select name=year title="Year" required>
	<option value=01>2050</option>
	<option value=02>3056</option>
	</select>
</div>

<br>On what day did you first become a baby?

</fieldset>

settings.json

{"view":"split-vertical","prefixfree":"1","page":"css"}