select下拉框去掉箭头,替换图片

记录工作中用到的小需求

.selectInput{
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  outline: none;
  border: 2px solid #2D3753;
  background-color: #414B6B;
  width: 260px;
  height: 40px;
  color: #fff;
  -webkit-appearance: none;//清除默认样式
  background: url("../../assets/icon/select.png") 230px center no-repeat;
  background-size: 16px;
  padding: 0 10px;
  option {
    background: #414B6B;
    border: none;
    outline: none;
  }
}
/*清除ie的默认选择框样式清除,隐藏下拉箭头*/
select::-ms-expand {
  display: none;
}
<select class="selectInput">
      <option value ="volvo">Volvo</option>
      <option value ="saab">Saab</option>
      <option value="opel">Opel</option>
      <option value="audi">Audi</option>
    </select>
上一篇:IfcReflectanceMethodEnum


下一篇:dev的grid封装组件,拖拽初始化属性