React中<select>标签下拉箭头不遵守padding样式规则问题如何解决？

这是原生<select>标签的浏览器默认渲染特性导致的问题：下拉箭头属于浏览器内置的UI控件，不属于常规DOM节点，你给select设置的padding规则不会作用到这个内置箭头上，它默认会紧贴select的右侧边缘，就会出现你截图里的padding失效的视觉效果。

方案1：重置原生样式自定义箭头 #

首先通过appearance: none去掉浏览器默认的下拉箭头，手动预留右侧padding空间，用背景图自定义箭头位置，你可以直接修改你的.textField样式如下：

.textField {
  background: #f7f7f7;
  border: 1px solid #b1b1b1;
  box-sizing: border-box;
  border-radius: 8px;
  /* 左侧保持16px，右侧预留足够空间放箭头 */
  padding: 16px 48px 16px 16px;
  width: 100%;
  height: 48px;
  /* 新增以下代码 */
  appearance: none;
  /* 用内置svg作为箭头，无需引入外部资源 */
  background-image: url("data:image/svg+xml;utf8,<svg fill='%23333' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
  background-repeat: no-repeat;
  /* 箭头距离右侧16px，垂直居中，和左侧padding对齐 */
  background-position: right 16px center;
  background-size: 20px;
}

方案2：套外层容器承载样式 #

不用修改原生select的默认行为，将所有边框、背景、圆角、padding的样式都交给外层容器实现，把select本身的背景、边框设为透明即可，修改代码如下：

JSX代码修改 #

<div className="selectWrapper">
  <select className="textField" name="states" id="states">
    <option value={defaultValue} selected disabled hidden>{defaultValue}</option>
    {options.map((option) => (
      <option value={option} key={option}>
        {option}
      </option>
    ))}
  </select>
</div>

CSS代码修改 #

/* 新增外层容器样式 */
.selectWrapper {
  background: #f7f7f7;
  border: 1px solid #b1b1b1;
  border-radius: 8px;
  padding: 0 16px;
  width: 100%;
  height: 48px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}
/* 调整原有textField样式 */
.textField {
  background: transparent;
  border: none;
  width: 100%;
  height: 100%;
  outline: none;
}

你当前在<option>上绑定onClick事件的写法在部分移动端Safari、低版本安卓浏览器上不会触发，建议把事件绑定到<select>的onChange上，更符合原生控件的交互规范：

<select 
  className="textField" 
  name="states" 
  id="states"
  onChange={(e) => clickHandler(e.target.value)}
>
  {/* 原有option代码不变，删除option上的onClick */}
</select>

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