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;
}

option {
	font-size:400px;
}

div.selector span {
	position:absolute;
	padding:7px 10px	
}

div.selector {
	display:inline-block;
	position:relative;
	font-size:20px;
	margin-right:10px;
	
	border-radius:6px;
	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:after {
  width: 70px;
  height: 16px;
  overflow: hidden;
  position: absolute;
  left: 50%;
  margin-left: -35px;
  bottom: -16px;
  }

dabblet.html

<fieldset>

<legend>Birthdate</legend>

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

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

<div class="selector">
<!--	<span>Year</span>-->
	<select name=year required>
	<option disabled selected>Year</option>
	<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"}