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; }
相关推荐
猫沙盆 2020-07-07
葉無聞 2020-06-09
buttonChan 2020-04-10
沈宫新 2020-02-23
sdbxpjzq 2019-12-03
sdbxpjzq 2019-11-04
sdbxpjzq 2019-10-26
zengni 2019-10-21
libowen0 2014-07-08
猫沙盆 2017-05-04
zhouguizhi 2018-02-14
ZiXuanFY 2007-04-12
淡风wisdon大大 2019-08-01
我就是停不下来 2019-07-01
jiedinghui 2019-07-01
wangnantjobj 2019-07-01
yongquanx 2019-07-01