js 选择框 下拉图标

你可以使用 CSS 中的 ::before 或 ::after 伪元素来实现下拉图标，例如：

select {
  /* 隐藏默认的下拉箭头 */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /* 设置下拉框的宽度和高度 */
  width: 200px;
  height: 30px;
  /* 设置下拉框的背景和边框 */
  background-color: #fff;
  border: 1px solid #ccc;
  /* 设置下拉箭头的样式 */
  position: relative;
}
select::after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  border-top: 5px solid #666;
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  position: absolute;
  right: 10px;
  top: calc(50% - 2.5px);
  pointer-events: none;
}

在上面的代码中，`select::after` 伪元素定义了一个三角形，作为下拉箭头的样式。`right` 和 `top` 属性用于将箭头定位在下拉框的右侧，`pointer-events: none` 属性可以防止箭头被点击。