填充不適用於<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 。