如何在select元素中添加SVG图标？CSS伪类实现问题排查

核心问题：元素属于替换元素，绝大多数浏览器不支持为其添加::before/::after伪元素，这就是你用.contacts__select::after完全没效果的原因。 替代实现方案 # 通过给select套一个父容器，把伪元素加在父容器上，就能实现你要的图标效果，具体代码如下： 1. 修改HTML结构 # 给select增加一个父容器： <div class="contacts__select-wrapper"> <select class="contacts__select"> <!-- 这里放你的下拉选项 --> </select> </div> 2. 调整CSS代码 # /* 父容器负责定位伪元素 */ .contacts__select-wrapper { position: relative; margin-top: 95px; margin-left: 64px; align-self: flex-start; } .contacts__select { margin: 0; height: 50px; width: 450px; background-color: #D6E7D2; border: none; box-shadow: 0px 4px 4px 0px #00000040; -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; appearance: none; font-family: 'Inter'; color: #717171; font-size: 20px; font-weight: 400; line-height: 40px; letter-spacing: 0.05em; text-align: left; /* 给右侧图标预留空间，避免文字覆盖 */ padding-right: 40px; } /* 父容器的伪元素承载SVG图标 */ .contacts__select-wrapper::after { position: absolute; content: ''; background-image: url('./assets/img/svg/accordion_btn.svg'); background-size: contain; background-repeat: no-repeat; /* 设置图标尺寸，根据你的需求调整 */ width: 24px; height: 24px; /* 垂直居中对齐 */ top: 50%; transform: translateY(-50%); right: 16px; /* 让点击图标时穿透到select，触发下拉 */ pointer-events: none; } 关键细节说明 # 替换元素（如select、img、input）的渲染由浏览器控制，不支持伪元素，这是浏览器的固有限制 给select加padding-right是为了防止下拉文字和右侧图标重叠 background-size: contain确保SVG图标完整显示，不会拉伸变形 pointer-events: none让图标区域的点击事件传递给下方的select，保证下拉功能正常 内容的提问来源于stack exchange，提问作者Alexander