How To Capitalize Only The First Letter Of An Html Option Element Using Css?

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

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

<selectsize="4"><optionselected>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.