css下拉框小三角去掉

CSS下拉框是网页开发中常用的元素，它有一个小三角用于指示是否展开下拉选项。但有时候我们想要去掉这个小三角，本文将介绍如何实现。

方法很简单，只需要在 CSS 样式中加入如下代码：

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: none;
  background-color: #fff;
  padding-right: 20px; /* 保留下拉箭头占用的位置 */
  background-position: calc(100% - 10px) center; /* 以 padding 为基准定位 */
  background-repeat: no-repeat;
} 

其中，-webkit-appearance、-moz-appearance、appearance 用于移除浏览器默认样式，background-image:none 用于移除小三角背景图像，padding-right 用于保留下拉箭头占用的位置，background-position: calc(100% - 10px) center 用于以 padding 为基准定位，background-repeat: no-repeat 用于不重复背景。

当然，需要注意的是，这个方法只在 Chrome、Firefox、Safari、Opera 等现代浏览器上适用，不适用于 IE 浏览器。