css如何為select添加樣式

這篇“css如何為select添加樣式”除了程序員外大部分人都不太理解，今天小編為了讓大家更加理解“css如何為select添加樣式”，給大家總結了以下內容，具有一定借鑒價值，內容詳細步驟清晰，細節處理妥當，希望大家通過這篇文章有所收獲，下面讓我們一起來看看具體內容吧。

改變select默認的樣式，一般情路情況下通過ul,li來模擬來實現。 
有很多Jquery插件就是通過這樣的方式來改變select默認樣式的。 
根據程序哥哥那邊的反映，此種方式在form提交后無法獲取數據，后來經過實驗，用了不同的JS/Jquery插件，都是同樣的結果：無法獲取數據。 

后來看一篇外國人寫的 博客，用css的樣式來實現 在select外面添加一個div，設置select的寬度小于父級div的寬度，然后通過設置div的background屬性，改變select默認箭頭的樣式。 
此種方法不失為一個好方法，不寫腳本，只用單純的css來實現。 

不過這種方法也是有瑕疵的，就是在IE系列下，選中某個選項的時候會有背景色塊，IE7-IE10都有此bug。 
在Opera下，設置div的背景圖不顯示，也就是select的下拉箭頭不顯示，這個不知道是什么原因所致。 
以下代碼 

<div class="select_style"> 
<select name="select"> 
<option>AAAAAAAAAAA</option> 
<option>BBBBBBBBBBB</option> 
<option selected>CCCCCCCCCCC</option> 
<option>DDDDDDDDDDD</option> 
</select> 
</div>

代碼如下:

.select_style {width:240px; height:30px; overflow:hidden; background:url(../images/arrow.png) no-repeat 215px; 
border:1px solid #ccc; 
-moz-border-radius: 5px; /* Gecko browsers */ 
-webkit-border-radius: 5px; /* Webkit browsers */ 
border-radius:5px; 
} 
.select_style select { padding:5px; background:transparent; width:268px; font-size: 16px; border:none; height:30px; 
-webkit-appearance: none; /*for Webkit browsers*/ 
}

css的選擇器有哪些

css的選擇器可以分為三大類，即id選擇器、class選擇器、標簽選擇器。它們之間可以有多種組合，有后代選擇器、子選擇器、偽類選擇器、通用選擇器、群組選擇器等等

感謝您的閱讀，希望您對“css如何為select添加樣式”這一關鍵問題有了一定的理解，具體使用情況還需要大家自己動手實驗使用過才能領會，快去試試吧，如果想閱讀更多相關知識點的文章，歡迎關注億速云行業資訊頻道！