填充不适用于<select>HTML 标记下拉箭头

Question

我在使用html select标签时遇到了一个奇怪的布局问题。 正如您从下面的屏幕截图中看到的，我的填充不适用。

具体来说，带有<select>标签的自动出现在右侧的箭头不遵守填充规则。

这是我的这个组件的CSS ：

.textField {
  background: #f7f7f7;
  border: 1px solid #b1b1b1;
  box-sizing: border-box;
  border-radius: 8px;
  padding: 16px;
  width: 100%;
  height: 48px;
}

我的html ：

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

我也在使用 React。

想知道这是否是应用于<select>样式的问题。

有什么建议？

Answer 1

您可以隐藏默认箭头并添加自定义箭头图像。 我已经更新了 css。 您可以在代码中应用此 css。

 .textField { background: #f7f7f7; border: 1px solid #b1b1b1; box-sizing: border-box; border-radius: 8px; padding: 16px; width: 100%; height: 48px; -webkit-appearance: none; appearance: none; -moz-appearance: none; background-image: url('https://www.svgrepo.com/show/80156/down-arrow.svg'); background-repeat: no-repeat; background-size: 14px 14px; background-position: calc(100% - 16px); }

 <select class="textField" name="states" id="states"> <option>defaultValue</option> <option> option 1 </option> <option> option 2 </option> <option> option 3 </option> <option> option 4 </option> </select>

Answer 2

我认为 HTML 中没有名为className属性。 应该是class 。