欢迎来到代码驿站!

JavaScript代码

当前位置:首页 > 网页前端 > JavaScript代码

select自定义小三角样式代码(实用总结)

时间:2021-01-14 11:16:35|栏目:JavaScript代码|点击:

这段代码是网上大部分的解决办法,在这里总结一下:

让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中

显示效果如图:

上一篇:通过一次报错详细谈谈Point事件

栏    目:JavaScript代码

下一篇:静态页面也可以实现预览 列表不同的显示方式 原创

本文标题:select自定义小三角样式代码(实用总结)

本文地址:http://www.codeinn.net/misctech/45336.html

推荐教程

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:914707363 | 邮箱:codeinn#126.com(#换成@)

Copyright © 2020 代码驿站 版权所有