0

I need to apply half of text in non-italics and the other half in italics.
I need to do something like this:
enter image description here

I have tried the code below but nothing seems to be working... is anyone capable of solving this?

#mySelect *.firstOption i {
  font-style: italic;
}
<select id="mySelect">
  <option class="firstOption">not-italic <i>italic</i></option>
  <option>b</option>
  <option>c</option>
</select>
eric
  • 320
  • 3
  • 18
  • Actually not possible, Please check https://stackoverflow.com/questions/7208786/how-to-style-the-option-of-a-html-select – Jagjeet Singh Oct 03 '18 at 01:33
  • @JagjeetSingh i have seen that but it is post from 2011, surely there is someway now – eric Oct 03 '18 at 01:34
  • Possible duplicate of [How to style the option of a html "select"?](https://stackoverflow.com/questions/7208786/how-to-style-the-option-of-a-html-select) – kumarharsh Oct 03 '18 at 01:50

1 Answers1

1

If you want to style the contents of the select based on the selected option, you can't do that with just CSS.

Here's a duplicate question about that:

If you're asking about the placeholder text, then that's different again. You might need to post a snippet that includes how placeholder text is set and/or target platforms.

If you just want to style the first option in the dropdown list, then you can do that with just css by either:

  1. Remove the asterisk (*), and the i selector from your code, and it will work. (I've removed the explicit <i> tags, as I assumed that's not what you want).

#mySelect .firstOption {
  font-style: italic;
}
<select id="mySelect">
  <option class="firstOption">alpha</option>
  <option>beta</option>
  <option>gamma</option>
</select>
  1. You can also achieve this using the :first-child selector on the option element:

option:first-child{
  font-style: italic;
}
<select id="mySelect">
  <option>alpha</option>
  <option>beta</option>
  <option>gamma</option>
</select>
Ergwun
  • 12,579
  • 7
  • 56
  • 83
  • in your dropdown you have two "alphas". You have made the second alpha in italics. i also need the first alpha in italics. i hope that makes sense – eric Oct 03 '18 at 01:37
  • Ah, so you want the selected option to appear in italics in the select box itself as well as the in the dropdown list, right? – Ergwun Oct 03 '18 at 01:41
  • yes @Ergwun, that is what i need. I need half of text to be in non-italics and other half in italics as well. sample: _alpha_ omega – eric Oct 03 '18 at 01:42
  • Ok. Not sure about that, sorry. You might want to checkout out https://developer.mozilla.org/en-US/docs/Web/CSS/::placeholder – Ergwun Oct 03 '18 at 01:52