如何仅用CSS去除select下拉选项继承的左侧内边距？

问题核心在于<select>的padding-left会作用于整个控件（包括下拉选项），而浏览器对<option>的padding属性几乎没有支持，无法直接覆盖。要解决这个问题，我们可以换一种方式偏移选中的文本，不让下拉选项受到影响：

解决方案：用text-indent替代padding-left #

移除<select>的padding-left，改用text-indent来偏移选中状态的文本，这个属性不会影响下拉列表里的<option>元素。

修改后的CSS代码：

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

.icon {
  position: absolute;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  background-image: url("icon.png");
  background-size: cover;
}

select {
  appearance: none;
  padding: 8px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
  width: 200px;
  /* 移除原有的padding-left */
  text-indent: 24px; /* 调整此值让文本避开图标，根据图标尺寸/位置灵活设置 */
}

原理说明 #

• text-indent仅作用于控件内显示的选中文本，下拉列表的<option>不会继承这个属性，所以选项会保持正常的左对齐。
• 相比padding-left，这种方式不会改变控件的内容区域尺寸，也就不会影响下拉选项的布局。

如果需要兼容更旧的浏览器，也可以尝试以下备选方案（不推荐，仅作补充）：

• 给<select>设置direction: rtl，同时给所有<option>设置direction: ltr，再配合padding-right实现文本偏移，但这种方式可能会影响文本排版逻辑，需谨慎使用。

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