select去除默认样式

 效果如下：

<style>
.box {
    border: 1px solid #bbb;
    border-radius: 1px;
    box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
    width: 300px;
    background: #f3f3f3;

}
.custom-select {
  position: relative;
}
.custom-select select {
  width: 100%;
 -webkit-border-radius: 0;
 -webkit-appearance: none;  /*去除下拉框默认样式*/
 border: 0;
 text-indent: 10px;
}
.custom-select::after {
  content: "";
  position: absolute;
  width: 0px;
  height: 0px;
  top: 50%;
  right: 8px;
  margin-top:-4px;
  border:8px solid #929497;
  border-width: 8px 5px 8px;
  border-color: #f60 transparent transparent transparent;
  z-index: 2;
  pointer-events:none;
}

.custom-select:hover {
  border:1px solid #f60;
}

.custom-select select:focus {
  outline:none;
  /*box-shadow: 0 0 1px 3px rgba(180,222,250, 1);*/
  background-color:transparent;
  color: #222;
}

.custom-select option {
  font-weight:normal;
}

</style>
<div class="box custom-select">
    <select name="" id="">
        <option value="选择1">选择1</option>
        <option value="选择2">选择2</option>
        <option value="选择3">选择3</option>
        <option value="选择4">选择4</option>
    </select>
</div>