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

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

如图实现这样的效果

HTML代码如下:

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

css样式代码

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

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

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

 

猜你在找的HTML5相关文章