前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >select自定义小三角样式

select自定义小三角样式

作者头像
蓓蕾心晴
发布2018-04-12 13:18:37
9890
发布2018-04-12 13:18:37
举报
文章被收录于专栏:前端小叙

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

让select透明,上面加一个span,来替换select框,可以自定义小三角样式,也可以做出select文字居中的效果。

代码语言:javascript
复制
         <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>
代码语言:javascript
复制
.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;
}
代码语言:javascript
复制
$(".ui-select select").change(function(){
   $(this).prev("span").html($(this).find("option:selected").val()+'<i class="icon-down lMar10"></i>');
})

显示效果如图:

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2017-01-17 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档