最近在一個專案中，要在原生的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;
}
 

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