问题描述
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.