select自定義小三角樣式代碼（實(shí)用總結(jié)）
更新時(shí)間：2017年08月18日 11:47:01 作者：蓓蕾心晴
這篇文章主要介紹了select自定義小三角樣式，通過css HTML js 代碼詳細(xì)展示了操作過程，自定義小三角樣式，也可以做出select文字居中的效果,需要的朋友可以參考下
這段代碼是網(wǎng)上大部分的解決辦法，在這里總結(jié)一下：
讓select透明，上面加一個(gè)span，來替換select框，可以自定義小三角樣式，也可以做出select文字居中的效果。
<div class="ui-select">
<span>使用加息券或現(xiàn)金券 <i class="icon-down lMar10"></i></span>
<select name="" id="">
<option value="10元現(xiàn)金券">10元現(xiàn)金券</option>
<option value="20元現(xiàn)金券">20元現(xiàn)金券</option>
<option value="30元現(xiàn)金券">30元現(xiàn)金券</option>
<option value="40元現(xiàn)金券">40元現(xiàn)金券</option>
</select>
</div>
.ui-select{
width:75%;
height:63px;
line-height:63px;
background-color:#ECAFB4;
color:#fff;
padding:0 30px;
text-align: left;
position: relative;
}
select{
width:100%;
height:63px;
line-height:33px;
opacity: 0;
position: absolute;
top:0;
left:0;
}
/*小三角圖標(biāo)*/
.icon-down{
display: inline-block;
width:30px;
height:16px;
background: url("../image/newWap/wapIcons.png") -168px -96px no-repeat;
}
$(".ui-select select").change(function(){
$(this).prev("span").html($(this).find("option:selected").val()+'<i class="icon-down lMar10"></i>');
})
//select監(jiān)測option的值的變化，添加到span中
顯示效果如圖：
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助~如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持!
相關(guān)文章
非常不錯(cuò)的效果，適合在當(dāng)前頁打開測試窗口，圖片等2008-09-09
JS在onclientclick里如何控制onclick的執(zhí)行
這篇文章主要介紹了JS在onclientclick里如何控制onclick的執(zhí)行的相關(guān)資料,需要的朋友可以參考下2016-05-05
Javascript實(shí)現(xiàn)Vue跨組件通信的方法詳解
這篇文章主要為大家詳細(xì)介紹了Vue的跨組件通信，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03
這篇文章主要介紹了使用webpack構(gòu)建應(yīng)用的方法步驟，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
這篇文章主要介紹了Typescript中函數(shù)類型,主要包括常見寫法、可選參數(shù)，默認(rèn)參數(shù)及剩余參數(shù)，本文通過示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-01-01
Dropzone.js實(shí)現(xiàn)文件拖拽上傳功能(附源碼下載)
dropzone.js是重量輕的JavaScript庫，將HTML元素設(shè)置為一個(gè)降落區(qū),并通過Ajax文件被上傳到服務(wù)器。本文給大家詳細(xì)介紹Dropzone.js實(shí)現(xiàn)文件拖拽上傳功能，需要的朋友參考下吧2016-11-11
當(dāng)自定義數(shù)據(jù)屬性為json格式字符串時(shí)jQuery的data api問題探討
當(dāng)自定義數(shù)據(jù)屬性是一個(gè) json 格式字符串時(shí)，緩存的數(shù)據(jù)如果被修改， 則修改后的數(shù)據(jù)繼續(xù)存在于緩存系統(tǒng)中， 如果不留意，這可能導(dǎo)致一些BUG，接下來將對此問題詳細(xì)概述下2013-02-02
Vue3基于countUp.js實(shí)現(xiàn)數(shù)字滾動的插件
本文主要介紹了Vue3基于countUp.js實(shí)現(xiàn)數(shù)字滾動的插件，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
下面小編就為大家?guī)硪黄猨s 彈出虛擬鍵盤修改密碼的簡單實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-10-10
JS自帶一套內(nèi)存管理引擎,負(fù)責(zé)創(chuàng)建對象、銷毀對象,以及垃圾回收,下面這篇文章主要給大家介紹了關(guān)于JavaScript垃圾回收機(jī)制的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2021-11-11