文本转换选择字段浏览器问题

Question

我正在尝试使用CSS文本转换将选项文本更改为大写。 在Safari / iphone中不起作用，在Firefox /桌面中不起作用。没有人可以使用toUpperCase（）/ javascript吗？

select {
  text-transform: uppercase;
}

<select>
  <option value="">item1</option>
  <option value="">item2</option>
</select>

Answer 1

文本转换确实适用于Safari 1.0 +和firefox 1.0+，因为它属于CCS1。

您可以尝试使用  <select style="text-transform:uppercase"> 代替？

请注意，某些样式不受此样式支持。

https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform

礼物

Answer 2

不幸的是，您可能需要求助于JS：

document.querySelectorAll('.upper-case-option').forEach(option => {
  option.text = option.text.toUpperCase()
})

<select>
  <option class="upper-case-option" value="">item1</option>
  <option class="upper-case-option" value="">item2</option>
</select>