問題描述

text-transform: capitalize 在這種情況下不起作用，因為文本已經是大寫了.

text-transform: capitalize does not work in this case because the text is already uppercase.

<select>
    <option>
      OPTION
    </option>
</select>

這也不起作用.

select{
  -webkit-appearance: none;
  text-transform: lowercase;
  display: inline;
}

select option::first-letter{
  text-transform: uppercase;
}

它應該(至少)使用 CSS(而不是 JS)在 Chrome 上工作.

It should work on Chrome (at least) using CSS (and not JS).

推薦答案

在 Chrome 和 Firefox 中，您可以為 option 元素設置樣式 if 它的 select 的大小大于 1.

In Chrome and Firefox, you can style an option element if its select has a size greater than 1.

您可以通過以下方式利用它:

You can exploit this as follows:

select {
  height: 1.4em;             /* show only one option when not focused */
}

select:focus {
  height: 100%;              /* show all options when focused */
}

option  {
  text-transform: lowercase; /* change to lowercase */
  padding-right: 2em;        /* the select's width is based on width of its longest non-transformed ... */
                             /* option.  padding ensures that option is completely visible */
  display: none;             /* hide all options by default (see below) */
}

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

option:checked, select:focus option { 
  display: block;            /* show selected option, or show all options when the select is focused */
}

<select size="4">
  <option selected>NOW IS THE TIME</option>
  <option>for all good men</option>
  <option>tO Come To tHe aid</option>
  <option>of the party</option>
</select>

它不會相當像普通的選擇框一樣工作，Chrome 有一個奇怪的行為，即所選選項的背景是灰色的.不知道如何防止這種情況發生.

It won't quite act like a normal select box, and Chrome has a strange behavior in that the selected option will have a gray background. Can't figure out how to prevent that.

這篇關于如何使用 CSS 僅將 HTML 選項元素的第一個字母大寫?的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！