0

Im looking to style the first option (Search Clubs) so it will be bold and the rest normal font weight. I can get the first option to be bold but it only appears bold once the dropdown is clicked, it will stay normal in the selected view

<select name="" id="">
  <option value="">Search Clubs</option>
  <option value="">Bodyshots Kickboxing Gym</option>
  <option value="">Champions Kickboxing Club</option>
  <option value="">North East Mugendo: Forkhill</option>
  <option value="">North East Mugendo: Newry</option>
  <option value="">North East Mugendo: Lordship</option>
</select>
Pierce McGeough
  • 3,016
  • 8
  • 43
  • 65
  • Please read this post: http://stackoverflow.com/questions/1895476/how-to-style-a-select-dropdown-with-css-only-without-javascript – enb081 Mar 28 '13 at 16:09
  • can you not put the text in tags within the option? so it looks like this: – NoLiver92 Mar 28 '13 at 16:09
  • @enb081: That doesn't apply. Poster is trying to style the contents of the options, not the arrow of the dropdown. – Colin DeClue Mar 28 '13 at 16:17
  • The question I posted wasn't only about the arrow. It was about styling a drowdown including its options. – enb081 Mar 28 '13 at 16:19

1 Answers1

0

it is not possible, as you are trying to style the shadow DOM of a <select> tag.

learn about shadow DOM here:

http://glazkov.com/2011/01/14/what-the-heck-is-shadow-dom/

some browsers allow you a certain degree of styling, e.g.:

What if you change the font-family?

select {
  font-family: Cursive;
}

WebKit browsers (Safari, Chrome) will ignore you. Firefox, Opera, and IE will respect your change. The font-family won't cascade into the select though, you have to explicitly declare it on them.

read more about this:

http://css-tricks.com/dropdown-default-styling/

Luca
  • 9,259
  • 5
  • 46
  • 59
  • "it is not possible, as you are trying to style the shadow DOM of a – Code Whisperer Sep 15 '16 at 14:34
  • I'm sorry I don't understand your question and downvote. care to elaborate? – Luca Sep 16 '16 at 10:45
  • 1
    Isn't it possible to style the shadow DOM of a select tag? – Code Whisperer Sep 16 '16 at 11:43
  • If you read the article links in my answer, you'd get the answer to your question - writing about it would have been too long for the SO q&a format. I still don't get what was wrong to downvote. – Luca Sep 16 '16 at 13:16
  • A link is good but just a link without explanation of what it says is not great – Code Whisperer Sep 16 '16 at 16:27
  • Here is a good link for you: http://stackoverflow.com/help/privileges/vote-down "Use your downvotes whenever you encounter an egregiously sloppy, no-effort-expended post, or an answer that is clearly and perhaps dangerously incorrect." – Luca Sep 18 '16 at 21:51