对select表单控件进行美化

最近在一个项目中，要在原生的select表单控件进行美化成input表单控件一样的样式。

对此，我的想法是把这个select元素绝对定位并完全覆盖到一个input元素上，然后让这个select元素透明。这样，我看到的就会是一个input元素，但是点击该input元素时，会出现select元素的下拉选择，因为select虽然透明化了，但是option并不会受影响，这就完美解决了select的美化问题。html如下：

<select class="select" id="sel_time" value="">
	<option value="">请选择日期</option>
	<option value="12:00">12:00</option>
	<option value="13:00">13:00</option>
</select>
<input type="text" placeholder="请选择时间" id="time">

但是，对于不同浏览器，select的透明化有差异，有的浏览器只需要把select的边框和背景透明即可，但是有些浏览器不行，因此需要把整个select元素设置不透明度。css实现样式如下：

input[type="text"], .select{
    width: 100%;
    height: 44px;
    margin: 10px auto 0px;
    padding: 0px 15px;
    box-sizing: border-box;
    font-size: 11pt;
    border: 1px solid #ccc;
}
.select{
    background-color: transparent;
    opacity: 0;
    border: none;
    outline: none;
    color: transparent; 
    position: absolute;
}
.select>option{
    color: #2c2c2c;
}
.select>option:first-child{
    color: #ccc;
}

为了能够让该input元素同步select的取值，需要JavaScript来完成取值的同步：

var sel_time = document.getElementById('sel_time'),
	time = document.getElementById('time');
sel_time.addEventListener('change', function(){
	time.value = sel_time.value;
}, false);