对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);