溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

select自定義小三角樣式代碼(實(shí)用總結(jié))

發(fā)布時(shí)間:2020-09-13 19:27:08 來源:腳本之家 閱讀:180 作者:蓓蕾心晴 欄目:web開發(fā)

這段代碼是網(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中

顯示效果如圖:

select自定義小三角樣式代碼(實(shí)用總結(jié))

 以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助~如果有疑問大家可以留言交流,謝謝大家對(duì)億速云的支持!

向AI問一下細(xì)節(jié)

免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI