select修改原生样式组件

html:

div class="select">
      <select class="" name="">
            <option value="gushi" selected>故事</option>
            <option value="qita">其他</option>
            <option value="qita">其他</option>
            <option value="qita">其他</option>
      </select>
      <i class="icon icon-icon-down-black"></i>
</div>

css:

.select {
    display: inline-block;
    margin-left: -5px;
    position: relative;
    select {
        appearance:none;
        -moz-appearance:none;
        -webkit-appearance:none;
        border: solid 1px #dfdfdf;
        // background: url("../img/sprite.png") no-repeat scroll right center transparent;
        background: transparent;
        width: 340px;
        height: 36px;
        line-height: 36px;
        padding-left: 10px;
        padding-right: 16px;
        @include border-radius(0);
        z-index: 1;
    }
    i {
        position: absolute;
        top: 15px;
        right: 10px;
    }
}