编程之家收集整理的这篇文章主要介绍了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