CSS stylize the second word in select option

Asked Sep 28 '18 at 13:24

Active Sep 28 '18 at 13:31

Viewed 35 times

Is it possible to change the style for just one word in a select option with CSS ?

<select>
  <option class="my-class">Angelina Jolie</option>
  <option class="my-class">Brad Pitt</option>
  <option class="my-class">Robert Duval</option>
  <option class="my-class">James Cameron</option>
</select>

Result expected

Angelina Jolie
Brad Pitt
Robert Duval
James Cameron

I tried with many selector as nth-word but it doesn't work.

Maybe it's just impossible ?

edited Sep 28 '18 at 13:25

Temani Afif

245,468
26
309
415

asked Sep 28 '18 at 13:24

EmmCall

1

yes it's just impossible – Temani Afif Sep 28 '18 at 13:24
You could surround the second word in a `span` and then use a regular css selector like `option.my-class span` to target them. – Fabian S. Sep 28 '18 at 13:26
@FabianSchöner even that won't work, you can try it – Temani Afif Sep 28 '18 at 13:28
https://stackoverflow.com/questions/55612/css-to-increase-size-of-first-word – Hary Sep 28 '18 at 13:29
@FabianSchöner that doesn't work for dropdowns – CodeBoyCode Sep 28 '18 at 13:29
@TemaniAfif CodeBoyCode ah you guys are right because the select is a native control rendered by the browser, i totally forgot. I'm too used to using plugins to style those. – Fabian S. Sep 28 '18 at 13:30
Thanks guys, got it, it's impossible. But it's a pity that browsers don't allow to do so. – EmmCall Oct 01 '18 at 16:00

CSS stylize the second word in select option

0 Answers0