How to capitalize ONLY the first letter, if the options are only in uppercase and the selection has not a specific size? (CSS)

Question

I have uppercase option values and I want to capitalize only the first letter.

My code:

option {
  text-transform: lowercase; /* change to lowercase */
}

option::first-letter {
  text-transform: uppercase; /* change first letter to uppercase */
}

<select>
  <option selected>ABC</option>
  <option>DEF</option>
  <option>GHI</option>
</select>

I found this. [lower-case-all-then-capitalize-pure-css](https://stackoverflow.com/questions/21827377/lower-case-all-then-capitalize-pure-css) — Gandal, Aug 02 '17 at 08:27
Possible duplicate of [How to capitalize ONLY the first letter of an HTML option element using CSS?](https://stackoverflow.com/questions/34188117/how-to-capitalize-only-the-first-letter-of-an-html-option-element-using-css) — Vadim Ovchinnikov, Aug 02 '17 at 09:10
Possible duplicate of https://stackoverflow.com/questions/34188117/how-to-capitalize-only-the-first-letter-of-an-html-option-element-using-css — Super User, Aug 02 '17 at 09:17
it is not the same, because the solution use select option element with specific size. When you delete the size, then it not works anymore. — Marcel S., Aug 02 '17 at 09:47

score 8 · Answer 1 · answered Aug 02 '17 at 08:11

You can use option:first-letter for this, check updated snippet below..

select option  {
  text-transform: lowercase; /* change to lowercase */
}
select option:first-letter {
  text-transform: uppercase;
}

<select>
  <option selected>ABC</option>
  <option>DEF</option>
  <option>GHI</option>
</select>

score 2 · Answer 2 · edited Aug 02 '17 at 08:20

2

Simply use text-transform:capitalize;

edited Aug 02 '17 at 08:20

web-tiki

99,765
32
217
249

answered Aug 02 '17 at 08:07

Roshan Raju

41
5

7

I don't think this will work in this case. This will only capitalize the first character, but it will not convert the other ones to lowercase. Correct me if I'm wrong. – carlo Aug 02 '17 at 08:10

score -1 · Answer 3 · answered Aug 02 '17 at 08:16

-1

Here's a fiddle example

    select {text-transform: capitalize}

answered Aug 02 '17 at 08:16

Kevin N.

163
5

1

Can you change your Options to "ABC" "EFF" ... and test it again? – Marcel S. Aug 02 '17 at 08:31
styling dropdowns tend to always be a pain. I suggest creating your dropdown using divs and class to style to your hearts desire or using javascript. – Kevin N. Aug 03 '17 at 01:36

How to capitalize ONLY the first letter, if the options are only in uppercase and the selection has not a specific size? (CSS)

3 Answers3