如何僅使用CSS大寫HTML選項元素的首字母？

text-transform: capitalize在這種情況下不起作用，因爲文本已經是大寫。如何僅使用CSS大寫HTML選項元素的首字母？

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

這也沒有工作。

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

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

它應該在Chrome（至少）使用CSS（而不是JS）工作。

來源

2015-12-09 B Seven

我不認爲你可以用* only * CSS做到這一點。 – Draco18s

你不能風格'

在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行爲，因爲所選選項將具有灰色背景。無法弄清楚如何防止這種情況。

來源

2015-12-09 22:08:56

是的，它行爲怪異。但它確實有效。 –

這很有趣..似乎在Firefox和Chrome中工作，但不是IE9（大驚喜）。它可能在IE的其他版本中工作。無論如何，我刪除了我的答案，因爲它似乎有一種方法來做到這一點與CSS ... –

謝謝。它在IE11（或Safari）中都不起作用。我專注於基於OP的要求的Chrome，「它應該在Chrome（至少）上工作。」在IE或Safari中可能沒有辦法做到這一點。 –

如何僅使用CSS大寫HTML選項元素的首字母？

回答

相關問題