如何替换HTML datalist自带的默认箭头，实现自定义下拉箭头样式

现有代码问题 #

你当前写法不生效的核心原因是：<input>属于替换元素，直接为它添加::before/::after伪元素不会被浏览器渲染。

可行实现方案 #

方案1：父容器挂载伪元素（推荐，兼容性最好） #

不需要修改核心逻辑，只需要调整样式和外层容器属性即可：

修改后HTML

<div class="datalist-wrapper">
  <input type="text" list="events" class="uk-input contact-input-datalist" placeholder="Type of Event" />
  <datalist name="" id="events">
    <option>Event 1</option>
    <option>Event 2</option>
    <option>Event 3</option>
    <option>Event 4</option>
  </datalist>
</div>

修改后CSS

/* 外层容器负责定位箭头 */
.datalist-wrapper {
  position: relative;
  width: fit-content; /* 可根据你的布局调整宽度 */
}

/* 隐藏不同浏览器的默认箭头 */
.contact-input-datalist::-webkit-calendar-picker-indicator {
  opacity: 0;
  pointer-events: none;
}
.contact-input-datalist::-moz-list-bullet {
  opacity: 0;
  pointer-events: none;
}
.contact-input-datalist::-ms-expand {
  display: none;
}

.contact-input-datalist {
  padding-right: 30px; /* 右侧留空避免文字和箭头重叠 */
  /* 保留你原有input的其他样式 */
}

/* 自定义箭头，你可以替换content为你需要的Font Awesome图标编码，这里用的是通用向下箭头编码f107 */
.datalist-wrapper::after {
  content: "\f107";
  font-family: "Font Awesome 6 Free"; /* 注意和你引入的Font Awesome版本对应 */
  font-weight: 900;
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none; /* 点击箭头穿透到input，触发下拉 */
}

方案2：背景图实现（无需修改HTML结构） #

如果你不想调整HTML结构，可以直接给input加内嵌SVG背景实现箭头，无需引入额外资源：

.contact-input-datalist {
  /* 内嵌灰色向下箭头SVG，可自行修改颜色、尺寸参数 */
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat right 10px center;
  padding-right: 30px;
}
/* 隐藏默认箭头的代码和方案1一致 */

注意事项 #

• 如果你用Font Awesome图标，要确保页面已经引入了对应版本的Font Awesome资源，否则图标会显示为乱码
• 调整箭头的right、font-size属性可以匹配你的设计稿样式
• pointer-events: none是为了避免箭头遮挡input的点击事件，保证点击箭头区域也能正常展开下拉选项

内容的提问来源于stack exchange，提问作者RuLee