CSS实例篇--CSS3实现模拟select 以及其中的三角形

2019年9月14日 211次阅读 来源: 风雨后见彩虹

如图实现这样的效果：
《CSS实例篇--CSS3实现模拟select 以及其中的三角形》
html代码如下：

<div class="select-bg">                     
    <select class="select-green">
        <option value="">高级客户经理</option>
        <option value="">中级客户经理</option>
    </select>  
</div>

css样式代码：

.select-bg{
    display:block;
    width:200px;
    margin:0 auto;
    height: 30px;
    line-height: 37px;
    font-size: 13px;
    border:1px #0f7fc7 solid ;
    box-sizing:border-box;
    cursor: pointer;
    position: relative;
}

.select-bg:after{
    content:' ';
    position: absolute;
    right:6px;
    top:50%;
    margin-top:-5px;
    width:0px;
      height:0px;
      border-left:10px solid transparent;
      border-right:10px solid transparent;
      border-top:10px solid #0f7fc7;
    font-size:0px;
    line-height:0px
}

.select-green {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    position: relative;
    outline: none;
    border: 0 none;
    position: relative;
    padding: 0 0 0 5px;
    width: 100%;
    color:#0f7fc7;
    font-weight: bold;
    background: none;
    background-color: transparent;
    font-size: 13px;
    z-index: 99;
    overflow: hidden;
}

需要demo猛点该文字，百度云盘下载

    原文作者：风雨后见彩虹
    原文地址: https://segmentfault.com/a/1190000003505747
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞