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元素啦