如何用纯HTML和CSS移除datalist输入框默认箭头并替换自定义箭头

要实现这个需求，核心是先隐藏浏览器自带的箭头，再通过容器+自定义元素的方式添加自己的箭头图标，具体步骤和代码如下：

1. 修改HTML结构 #

给input套一个容器，方便定位自定义箭头：

<body>
   <form>
      <label for="data-list">Choose a browser from this list 
         <div class="input-wrapper">
            <input list="browsers" name="my-browser" placeholder="Enter color">
         </div>
         <datalist id="browsers">
            <option value="Green"></option>
            <option value="Red"></option>
            <option value="Blue"></option>
            <option value="Yellow"></option>
            <option value="Black"></option>
         </datalist>
      </label>
   </form>
</body>

2. 用CSS隐藏默认箭头 #

通过浏览器前缀的appearance属性彻底移除默认箭头，同时调整input内边距，给自定义箭头留出空间：

/* 隐藏各浏览器的默认箭头 */
input[list] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /* 右侧留空间放自定义箭头 */
  padding-right: 30px;
  /* 可选：统一input基础样式 */
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 8px 12px;
  width: 250px;
}

/* 针对Firefox的额外处理，避免残留箭头痕迹 */
input[list]::-webkit-calendar-picker-indicator {
  display: none;
}

3. 添加自定义箭头图标 #

有两种常用方式添加自定义箭头，任选其一即可：

方法一：纯CSS绘制箭头 #

不用额外图标文件，直接用CSS绘制箭头：

.input-wrapper {
  position: relative;
  display: inline-block;
}

.input-wrapper::after {
  content: "";
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  /* 绘制向下箭头 */
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid #666;
  /* 点击箭头时触发input下拉，设置pointer-events */
  pointer-events: none;
}

方法二：使用自定义图标图片 #

如果想用自己设计的箭头图标，替换伪元素的背景图即可：

.input-wrapper {
  position: relative;
  display: inline-block;
}

.input-wrapper::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  background-image: url("你的箭头图标本地路径");
  background-size: cover;
  pointer-events: none;
}

这样就能完全替换默认箭头，同时保留datalist的下拉选择功能。

内容的提问来源于stack exchange，提问作者Omar Bin Saleh