标签：none color appearance 箭头 background border 下拉框 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>

标签：none,color,appearance,箭头,background,border,下拉框,select
来源： https://blog.csdn.net/huyuehuyuehu/article/details/111587899

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。