如何使用CSS仅利用HTML选项元素的第一个字母？

text-transform: capitalize 在这种情况下不起作用,因为文本已经是大写的.

    
      OPTION
    

这也不起作用.

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

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

它应该在Chrome(至少)上使用CSS(而不是JS).

在Chrome和Firefox,你可以风格的option元素,如果它select的大小大于1.

您可以按如下方式利用它:

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 */
}

  NOW IS THE TIME
  for all good men
  tO Come To tHe aid
  of the party