CSS效果:CSS3实现模拟select以及其中的三角形

发布时间:2020-12-28 发布网站:编程之家
编程之家收集整理的这篇文章主要介绍了CSS效果:CSS3实现模拟select以及其中的三角形编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

如图实现这样的效果:

html代码如下:

<div class="select-bg">                     
    select ="select-green">
        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:' '; absolute;
    right:6px;
    top:50%;
    margin-top:-5px;0px;
      height:
      border-left:10px solid transparent;
      border-right:
      border-top:10px solid #0f7fc7;0px
}

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

 

总结

以上是编程之家为你收集整理的CSS效果:CSS3实现模拟select以及其中的三角形全部内容,希望文章能够帮你解决CSS效果:CSS3实现模拟select以及其中的三角形所遇到的程序开发问题。

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您喜欢交流学习经验,点击链接加入编程之家官方QQ群:1065694478
编程之家官方公众号

微信公众号搜索 “ 程序精选 ” ,选择关注!

微信公众号搜索 “ 程序精选 ”
精选程序员所需精品干货内容!