select 三角 css,CSS实例篇--CSS3实现模拟select 以及其中的三角形

如图实现这样的效果：

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;

}