css如何实现下拉框下拉箭头

CSS如何实现下拉框下拉箭头呢？

.drop-down {
      position: relative;
      display: inline-block;
}
.drop-down select {
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      background: url(down-arrow-icon.png) no-repeat;
      background-position: right center;
      background-color: #FFF;
      border: 1px solid #CCC;
      border-radius: 4px;
      padding: 6px 26px 6px 10px;
      font-size: 16px;
      color: #4D4D4D;
      box-sizing: border-box;
}
.drop-down select::-ms-expand {
      display: none;
}
.drop-down select:focus {
      outline: none;
}
    

其中的关键点是利用了background属性来设置下拉箭头图片，并使用padding来让文本和箭头相对定位。同时，由于不同浏览器对select的样式支持有所不同，需要使用appearance等属性来控制。

通过以上的CSS样式，我们可以实现一个简单的下拉框下拉箭头。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！