css3实现模拟select 以及其中的三角形_html/css_WEB-ITnose
程序员文章站
2022-04-09 17:47:45
...
如图实现这样的效果:
html代码如下:
html代码如下:
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猛点该文字,百度云盘下载