select自定義小三角樣式代碼（實用總結(jié)）
更新時間：2017年08月18日 11:47:01 作者：蓓蕾心晴
這篇文章主要介紹了select自定義小三角樣式，通過css HTML js 代碼詳細展示了操作過程，自定義小三角樣式，也可以做出select文字居中的效果,需要的朋友可以參考下
這段代碼是網(wǎng)上大部分的解決辦法，在這里總結(jié)一下：
讓select透明，上面加一個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)文章
今天遇到一個問題: 我通過 ajax 取回另一個頁面的 Html 。但這些 HTML 我不想直接輸出，想通過 getElementsByName 處理后再輸出相應(yīng)的內(nèi)容。用原生的 javascript怎樣可以處理呢？2010-07-07
js對象與一般的面向?qū)ο蟮某绦蛟O(shè)計語言有所不同的。js中的對象是基本原型的。下面給大家介紹js中對象的不同創(chuàng)建方法，非常不錯，感興趣的朋友一起學(xué)習(xí)吧2016-08-08
深入分析escape()、encodeURI()、encodeURIComponent()的區(qū)別及示例
這篇文章主要介紹了escape()、encodeURI()、encodeURIComponent()的區(qū)別,需要的朋友可以參考下2014-08-08
Bootstrap簡單實用的表單驗證插件BootstrapValidator用法實例詳解
這篇文章主要介紹了Bootstrap簡單實用的表單驗證插件BootstrapValidator用法,結(jié)合實例形式詳細分析了Bootstrap表單驗證插件BootstrapValidator基本功能、原理、用法及操作注意事項,需要的朋友可以參考下2020-03-03
在本篇文章中我們給大家通過實例講解一下關(guān)于JavaScript頁面加載事件的相關(guān)知識點內(nèi)容，有需要的朋友們可以參考下。2019-09-09
超強的IE背景圖片閃爍(抖動)的解決辦法...2007-09-09
js原生跨域_用script標(biāo)簽的簡單實現(xiàn)
下面小編就為大家?guī)硪黄猨s原生跨域_用script標(biāo)簽的簡單實現(xiàn)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-09-09
如何提升JavaScript執(zhí)行效率與性能在前端開發(fā)中位于一個很重要的地方，這節(jié)來研究下如何在平時做項目過程中，提升JavaScript性能與運行效率,需要的朋友可以參考下2012-12-12
這篇文章主要為大家詳細介紹了微信小程序日期時分組件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
這篇文章主要介紹了JavaScript獲取頁面元素的常用方法詳解,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-09-09