css select 添加的三角图标可点击

在使用select元素时，时常在其后跟随一个三角下拉图标，当该图标由于定位在select元素之上，不能点击，测试确定过不了，因此总结下解决方案：

html

<div class="input citySelect">

　　<select>

　　　　<option>上海市</option>

　　　　<option>北京市</option>

　　</select>

</div>

 

css 

.input{

　　border-bottom: 1px solid #9d9885;

　　position: relative; 

　　display: inline-block;

　　height:40px;

　　line-height: 40px;

　　width:100%;

　　vertical-align: top;

　　　　select{

　　　　height:40px;

　　　　border: none;

　　　　outline: none;

　　　　appearance:none;

　　　　-moz-appearance:none;

　　　　-webkit-appearance:none;

　　　　background: transparent; //背景色透明

　　　　width:100%;

　　}

}

.citySelect:after{

　　content:'';

　　display: block;

　　width: 14px;

　　height: 9px;

　　background: url(../imgs/icon_arrow_down.png) center center no-repeat;

　　background-size: cover;

　　position: absolute;

　　right: 0;

　　top: 50%;

　　margin-top: -4.5px;

　　z-index: -1;

}

总结：外部包一层元素，该元素为相对定位元素，为该元素添加伪元素，伪元素绝对定位，并z-index为负，select元素背景色透明，这样就即显示三角图标，又不影响点击select元素啦