text-transform: capitalize
在这种情况下不起作用,因为文本已经是大写了。
<select>
<option>
OPTION
</option>
</select>
这也不起作用。
select{
-webkit-appearance: none;
text-transform: lowercase;
display: inline;
}
select option::first-letter{
text-transform: uppercase;
}
使用 CSS(而不是 JS)它应该(至少)在 Chrome 上工作。
最佳答案
在 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 */
}
<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 有一个奇怪的行为,即选中的选项将有一个灰色的背景。无法弄清楚如何防止这种情况。
关于html - 如何使用 CSS 仅将 HTML 选项元素的首字母大写?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34188117/