如何只使用CSS的HTML选项元素的第一个字母大写？ [英] How to capitalize ONLY the first letter of an HTML option element using CSS?

问题描述

text-transform：capitalize 在此情况下不起作用，因为文本已经是大写。

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

这也无效。

  select {
 -webkit-appearance：none; 
 text-transform：lowercase; 
 display：inline; 
} 
 
 select option :: first-letter {
 text-transform：uppercase; 
} 
  

。

解决方案

在Chrome和Firefox中，您可以为选项 如果选择的大小大于1。

< pre class =snippet-code-css lang-css prettyprint-override> select {height：1.4em; / *只显示一个不聚焦的选项* /} select：focus {height：100％; / *显示聚焦时的所有选项* /}选项{text-transform：lowercase; / *改为小写* / padding-right：2em; / * select的宽度是基于其最长的未变换的宽度... * / / *选项。 padding确保该选项是完全可见的* / display：none; / *默认隐藏所有选项（见下文）* /} option :: first-letter {text-transform：uppercase; / *将第一个字母改为大写* /}选项：checked，select：focus option {display：block; / *显示所选选项，或者当选择聚焦时显示所有选项* /}

 < select size =4> < option selected> NOW is THE TIME< / option> < option> for all good men< / option> < option> tO help to< / option> < option>< / option>< / select>  

它不会像一个普通的选择框一样工作，Chrome有一个奇怪的行为，选择的选项将有一个灰色背景。无法弄清楚如何防止这种情况。

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

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

This did not work either.

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

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

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

解决方案

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>

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选项元素的第一个字母大写？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！