純css為select添加樣式(無(wú)腳本)實(shí)現(xiàn)
發(fā)布時(shí)間：2013-02-21 11:54:27 作者：佚名 
我要評(píng)論
我要評(píng)論改變select默認(rèn)的樣式，一般情路情況下通過(guò)ul,li來(lái)模擬來(lái)實(shí)現(xiàn);Jquery插件也是這樣,接下來(lái)介紹一種不寫(xiě)腳本，只用單純的css來(lái)實(shí)現(xiàn)。在IE系列下，選中某個(gè)選項(xiàng)的時(shí)候會(huì)有背景色塊，IE7-IE10都有此bug，感興趣的朋友可以參考下啊
改變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è)不知道是什么原因所致。
以下代碼
<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*/
}
有很多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*/
}
相關(guān)文章
jquery實(shí)現(xiàn)select下拉框美化特效源碼
jquery實(shí)現(xiàn)select下拉框美化特效，實(shí)現(xiàn)效果簡(jiǎn)潔大方，是一款非常實(shí)用的特效源碼。2015-08-27CSS美化下拉框select在火狐和谷歌瀏覽器下已測(cè)試
本示例要模仿的是下拉框，經(jīng)過(guò)美化的偽下拉，右邊的小三角是用css3實(shí)現(xiàn)的，鼠標(biāo)經(jīng)過(guò)的時(shí)候有旋轉(zhuǎn)特效2014-05-13- 這篇文章主要介紹了使用CSS3的::selection改變選中文本顏色的方法,也就是說(shuō)可以將默認(rèn)的藍(lán)色底色改為其他顏色,really cool,需要的朋友可以參考下2015-09-29
- 這篇文章主要介紹了用CSS和Div美化SELECT樣式的簡(jiǎn)單方法,同時(shí)提到了select相關(guān)的兼容性寫(xiě)法,需要的朋友可以參考下2015-08-06
- 去年我學(xué)jQuery的時(shí)候，曾經(jīng)做過(guò)一點(diǎn)選擇器（selector）的筆記,今天是CSS的選擇器，以后還有一部分xPath的選擇器。今天的筆記中包括44個(gè)選擇器，基本涵蓋了CSS 2和CSS 3的2012-12-18
css 讓文字不被選中之-moz-user-select 屬性介紹
讓文字不被選中，應(yīng)該有一個(gè)css屬性進(jìn)行控制，結(jié)果網(wǎng)上查了下發(fā)現(xiàn)了-moz-user-select 屬性介紹2024-05-05用CSS讓img input select button 圖片,文本框,下拉菜單,按扭垂直居中的
一直以來(lái),在HTML中,img input select button 這里元素，垂直對(duì)齊,比較難。結(jié)果我長(zhǎng)大了。我發(fā)現(xiàn)了一個(gè)現(xiàn)像，其實(shí)解決這些問(wèn)題只是一句話(huà)的事。2011-03-08css教程:css指令,兼容,注釋,selector-CSS教程-網(wǎng)頁(yè)制作-網(wǎng)頁(yè)教學(xué)網(wǎng)
1．2 跟css有關(guān)的標(biāo)記，指令 1．2．1 link <link rel="stylesheet" type="text/css" href="sheet1.css" media="all" />2008-10-17CSS Hack整理-CSS教程-網(wǎng)頁(yè)制作-網(wǎng)頁(yè)教學(xué)網(wǎng)
CSS Hack是在標(biāo)準(zhǔn)CSS沒(méi)辦法兼容各瀏覽器顯示效果時(shí)才會(huì)用上的補(bǔ)救方法,在各瀏覽器廠(chǎng)商解析CSS沒(méi)有達(dá)成一致前,我們只能用這樣的方法來(lái)完成這樣的任務(wù). 我進(jìn)行前端開(kāi)發(fā)的2008-10-17- 本文給大家介紹css代碼去掉select的下拉箭頭樣式的方法，代碼簡(jiǎn)單易懂，需要的朋友可以參考下2016-09-02
