如何在自定义下拉框的maindiv最右侧添加自定义caret图标？

没问题，我来帮你搞定这个需求！你现在的代码是通过把select放大超出maindiv来隐藏默认箭头，接下来我们可以用两种简单的方式添加自定义图标：

方法1：用CSS伪元素（无需修改HTML结构） #

这种方法最省心，不用改现有HTML，直接通过CSS的::after伪元素来生成图标：

首先修改你的.maindiv样式，加上相对定位，这样伪元素可以基于它定位：

.maindiv{ 
  width: 200px; 
  height: 40px; 
  overflow: hidden; 
  border: 1px solid black; 
  border-radius: 3px; 
  position: relative; /* 新增：让伪元素可以相对它定位 */
}
.maindiv select{ 
  width: 240px; 
  height: 40px; 
  border: none; 
  background: transparent; /* 可选：让select背景透明，和maindiv风格统一 */
}
/* 新增：自定义caret伪元素 */
.maindiv::after {
  content: "▼"; /* 这里用Unicode箭头，你也可以换成自定义背景图 */
  position: absolute;
  right: 10px; /* 距离右侧的间距 */
  top: 50%;
  transform: translateY(-50%); /* 垂直居中 */
  font-size: 16px;
  color: #333;
  pointer-events: none; /* 关键：让点击穿透到下面的select，不影响下拉 */
}

关键细节说明：

• position: relative给.maindiv做定位容器，伪元素的absolute定位才会生效
• pointer-events: none很重要，不然点击图标区域会没法触发下拉
• 你可以把content里的Unicode箭头换成自己的图标，比如用background-image: url('你的图标路径')，记得同时设置宽高哦

方法2：添加额外HTML元素（适合复杂图标） #

如果你的自定义图标是比较复杂的SVG或者需要单独控制样式，可以在maindiv里加一个单独的元素：

修改后的HTML：

<div class="maindiv">
  <select name="" id="">
    <option value="">Item 1</option>
    <option value="">Item 2</option>
    <option value="">Item 3</option>
  </select>
  <span class="custom-caret">▼</span> <!-- 新增的图标元素 -->
</div>

对应的CSS：

.maindiv{ 
  width: 200px; 
  height: 40px; 
  overflow: hidden; 
  border: 1px solid black; 
  border-radius: 3px; 
  position: relative; /* 新增定位容器 */
}
.maindiv select{ 
  width: 240px; 
  height: 40px; 
  border: none; 
  background: transparent;
}
/* 自定义caret样式 */
.custom-caret {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  color: #333;
  pointer-events: none; /* 同样设置穿透，不影响select点击 */
}

这种方法的好处是可以直接插入SVG图标或者img标签，灵活性更高~

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