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

【问题标题】：Padding doesn't apply to <select> HTML tag dropdown arrow填充不适用于 <select> HTML 标记下拉箭头
【发布时间】：2022-01-06 17:58:54
【问题描述】：

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

编辑：正如 cmets 中正确指出的那样，下面的代码是 React JSX 组件的一部分，而不是标准的 html。

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

这是我的CSS 用于此组件：

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

我的JSX：

<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>

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

有什么建议吗？

【问题讨论】：

Select 标签的样式是出了名的难。请在标记为 HTML 的问题中提供 HTML，而不是来自随机框架的内容。最好还是提供一个minimal reproducible example
好点，我编辑反映这是 jsx 而不是 html。

标签： css jsx

【解决方案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>

【讨论】：

实际上我想避免添加自定义箭头，而是更深入地研究为什么会发生这种行为以及如何解决它。话虽如此，您的解决方案运行良好，对于任何试图解决此问题的人来说，您的解决方案可能是最好的解决方案。

【解决方案2】：

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

【讨论】：

OP 称它为 html 但实际上是 JSX 需要使用 className
MB。我没有注意到他正在使用 React。 Questioner 只添加了 html 和 css 标签。问题中也没有提到 JSX。
是的，我明白，但它显然也不是标准的 html
我的错误，我编辑了问题以反映这是 jsx 而不是 html。