濮阳杆衣贸易有限公司

主頁 > 知識庫 > 純css為select添加樣式(無腳本)實現(xiàn)

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

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

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

不過這種方法也是有瑕疵的,就是在IE系列下,選中某個選項的時候會有背景色塊,IE7-IE10都有此bug。
在Opera下,設(shè)置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*/
}

標簽:荊門 懷化 延邊 昭通 青島 哈密 山南 潮州

巨人網(wǎng)絡(luò)通訊聲明:本文標題《純css為select添加樣式(無腳本)實現(xiàn)》,本文關(guān)鍵詞  純,css,為,select,添加,樣式,;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題,煩請?zhí)峁┫嚓P(guān)信息告之我們,我們將及時溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無關(guān)。
  • 相關(guān)文章
  • 下面列出與本文章《純css為select添加樣式(無腳本)實現(xiàn)》相關(guān)的同類信息!
  • 本頁收集關(guān)于純css為select添加樣式(無腳本)實現(xiàn)的相關(guān)信息資訊供網(wǎng)民參考!
  • 推薦文章
    东莞市| 财经| 上思县| 宁化县| 正镶白旗| 长沙市| 大石桥市| 五河县| 托克逊县| 昌都县| 名山县| 竹山县| 奎屯市| 都昌县| 金堂县| 娱乐| 沂南县| 苍溪县| 镇原县| 宁河县| 阿拉善盟| 广饶县| 峡江县| 莱芜市| 双城市| 额济纳旗| 大兴区| 奇台县| 承德市| 民和| 福州市| 巢湖市| 深州市| 临沧市| 岱山县| 兰溪市| 雷州市| 廊坊市| 盘山县| 舞钢市| 巴里|