Как использовать ТОЛЬКО первую букву элемента HTML с использованием CSS?

Question

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 (по крайней мере) с использованием CSS (а не JS).

Answer 1

В 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 имеет stran ge, поскольку выбранный вариант будет иметь серый фон. Не могу понять, как это предотвратить.