html - 如果选项仅大写且选择没有特定大小，如何仅将第一个字母大写？ (CSS)

Question

我有大写的 option 值，我只想将第一个字母大写。

我的代码:

option {
  text-transform: lowercase; /* change to lowercase */
}

option::first-letter {
  text-transform: uppercase; /* change first letter to uppercase */
}

<select>
  <option selected>ABC</option>
  <option>DEF</option>
  <option>GHI</option>
</select>

Answer 1

为此，您可以使用 option:first-letter，检查下面更新的代码段..

select option  {
  text-transform: lowercase; /* change to lowercase */
}
select option:first-letter {
  text-transform: uppercase;
}

<select>
  <option selected>ABC</option>
  <option>DEF</option>
  <option>GHI</option>
</select>