主頁(yè) > 知識(shí)庫(kù) > 純css為select添加樣式(無(wú)腳本)實(shí)現(xiàn)

純css為select添加樣式(無(wú)腳本)實(shí)現(xiàn)

熱門(mén)標(biāo)簽:最簡(jiǎn)單的百度地圖標(biāo)注店鋪 禹州電話外呼系統(tǒng) 梧州地圖標(biāo)注app AI外呼系統(tǒng) 價(jià)格 新鄉(xiāng)機(jī)器人外呼系統(tǒng) 錦州企業(yè)外呼系統(tǒng) 水經(jīng)注萬(wàn)能地圖標(biāo)注 青海保險(xiǎn)智能外呼系統(tǒng)商家 營(yíng)口400電話申請(qǐng)
改變select默認(rèn)的樣式,一般情路情況下通過(guò)ul,li來(lái)模擬來(lái)實(shí)現(xiàn)。
有很多Jquery插件就是通過(guò)這樣的方式來(lái)改變select默認(rèn)樣式的。
根據(jù)程序哥哥那邊的反映,此種方式在form提交后無(wú)法獲取數(shù)據(jù),后來(lái)經(jīng)過(guò)實(shí)驗(yàn),用了不同的JS/Jquery插件,都是同樣的結(jié)果:無(wú)法獲取數(shù)據(jù)。

后來(lái)看一篇外國(guó)人寫(xiě)的 博客,用css的樣式來(lái)實(shí)現(xiàn) 在select外面添加一個(gè)div,設(shè)置select的寬度小于父級(jí)div的寬度,然后通過(guò)設(shè)置div的background屬性,改變select默認(rèn)箭頭的樣式。
此種方法不失為一個(gè)好方法,不寫(xiě)腳本,只用單純的css來(lái)實(shí)現(xiàn)。

不過(guò)這種方法也是有瑕疵的,就是在IE系列下,選中某個(gè)選項(xiàng)的時(shí)候會(huì)有背景色塊,IE7-IE10都有此bug。
在Opera下,設(shè)置div的背景圖不顯示,也就是select的下拉箭頭不顯示,這個(gè)不知道是什么原因所致。
以下代碼

復(fù)制代碼
代碼如下:

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


復(fù)制代碼
代碼如下:

.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*/
}

標(biāo)簽:荊門(mén) 懷化 延邊 昭通 青島 哈密 山南 潮州

巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《純css為select添加樣式(無(wú)腳本)實(shí)現(xiàn)》,本文關(guān)鍵詞  純,css,為,select,添加,樣式,;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問(wèn)題,煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們,我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無(wú)關(guān)。
  • 相關(guān)文章
  • 下面列出與本文章《純css為select添加樣式(無(wú)腳本)實(shí)現(xiàn)》相關(guān)的同類信息!
  • 本頁(yè)收集關(guān)于純css為select添加樣式(無(wú)腳本)實(shí)現(xiàn)的相關(guān)信息資訊供網(wǎng)民參考!
  • 推薦文章