最新文章專題視頻專題問答1問答10問答100問答1000問答2000關鍵字專題1關鍵字專題50關鍵字專題500關鍵字專題1500TAG最新視頻文章視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關鍵字專題關鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
當前位置: 首頁 - 科技 - 知識百科 - 正文

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

來源:懂視網 責編:小采 時間:2020-11-27 22:32:14
文檔

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

select自定義小三角樣式代碼(實用總結):這段代碼是網上大部分的解決辦法,在這里總結一下: 讓select透明,上面加一個span,來替換select框,可以自定義小三角樣式,也可以做出select文字居中的效果。 <div class=ui-select> <span>使用加息券或現金券 <i cl
推薦度:
導讀select自定義小三角樣式代碼(實用總結):這段代碼是網上大部分的解決辦法,在這里總結一下: 讓select透明,上面加一個span,來替換select框,可以自定義小三角樣式,也可以做出select文字居中的效果。 <div class=ui-select> <span>使用加息券或現金券 <i cl

這段代碼是網上大部分的解決辦法,在這里總結一下:

讓select透明,上面加一個span,來替換select框,可以自定義小三角樣式,也可以做出select文字居中的效果。

    <div class="ui-select">
 <span>使用加息券或現金券 <i class="icon-down lMar10"></i></span>
 <select name="" id="">
 <option value="10元現金券">10元現金券</option>
 <option value="20元現金券">20元現金券</option>
 <option value="30元現金券">30元現金券</option>
 <option value="40元現金券">40元現金券</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;
}

/*小三角圖標*/
.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監測option的值的變化,添加到span中

顯示效果如圖:

聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

文檔

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

select自定義小三角樣式代碼(實用總結):這段代碼是網上大部分的解決辦法,在這里總結一下: 讓select透明,上面加一個span,來替換select框,可以自定義小三角樣式,也可以做出select文字居中的效果。 <div class=ui-select> <span>使用加息券或現金券 <i cl
推薦度:
標簽: 代碼 三角 總結
  • 熱門焦點

最新推薦

猜你喜歡

熱門推薦

專題
Top
国产精品久久久久精品…-国产精品可乐视频最新-亚洲欧美重口味在线-欧美va免费在线观看