溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

select自定義小三角樣式

發(fā)布時間：2020-08-10 21:49:30 來源：網(wǎng)絡 閱讀：963 作者：蓓蕾心晴 欄目：開發(fā)技術

這段代碼是網(wǎng)上大部分的解決辦法，在這里總結一下：

讓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;
}
//select監(jiān)測option的值的變化，添加到span中
$(".ui-select select").change(function(){
   $(this).prev("span").html($(this).find("option:selected").val()+'<i class="icon-down lMar10"></i>');
})

   顯示效果如圖：

select自定義小三角樣式


向AI問一下細節(jié)

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

AI
助
手