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