用css定义组件-下拉框

下拉框

（简单的说明一下：在父级进行相对定于，用伪元素添加小图标，同时让下拉框默认的样式隐藏

 问题：伪元素的小图标不能进行处罚select事件，有知道的小伙伴可以告知）

.select-grp{ position: relative;vertical-align: middle; display: inline-block; }
.select-grp:before{content: '\25bc';position: absolute;color: #767676;top: 0;bottom: 1px;right: 0;width: 2em;padding-top: 0.7em;line-height: inherit;text-align: center;transform:scale(0.84, 0.42);-webkit-transform:scale(0.84, 0.42);}
.select-grp select{appearance: none; -webkit-appearance: none; -moz-appearance:none;width: 100%;/*height: 100%; */height: 40px; padding-right: 2em;border-radius: 0;border: 1px solid #ddd;background-color: #fff; cursor: pointer;}
select::-ms-expand { display: none; }  /*解决的是ie7浏览器的appearance的不兼容*/

下拉框 html（demo）

 <span class="select-grp">
       <select name="" id="">
            <option value="">性别：男</option>
            <option value="">性别：女</option>
       </select>
 </span>