Style selected option while using box

Question

I'm trying to make a custom dropdown option list using the <select> tag. I want the selected option to be bigger in font-size than the options in the list.

I added the font-size property to my select menu, but it applies it also to all the options in the list, which makes the list unusable.

HTML

<h1>
  All houses located at 
    <select id="allhouses__dropdown">
</h1>
    <option value=""><a>Alle</a></option>
    <option value=".tilburg" selected><a>Tilburg</h1></a></option>
    <option value=".amsterdam"><a>Amsterdam</a></option>
    <option value=".breda"><a>Breda</a></option>
    <option value=".delft"><a>Delft</a></option>
    <option value=".den-haag"><a>Den Haag</a></option>
    <option value=".eindhoven"><a>Eindhoven</a></option>
    <option value=".enschede"><a>Enschede</a></option>
    <option value=".groningen"><a>Groningen</a></option>
    <option value=".leiden"><a>Leiden</a></option>
    <option value=".maastricht"><a>Maastricht</a></option>
    <option value=".nijmegen"><a>Nijmegen</a></option>
    <option value=".utrecht"><a>Utrecht</a></option>
    <option value=".rotterdam"><a>Rotterdam</a></option>
    <option value=".wageningen"><a>Wageningen</a></option>
    <option value=".zwolle"><a>Zwolle</a></option>
</select>

CSS

#allhouses__dropdown {
  background: transparent;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  outline: none;
  font-weight: 600;
  font-size: 2rem !important;
  color: red;
}

Is there a way to apply the font-size styling only to the selected option? The solution include jQuery, but only if necessary.

I made a codepen that shows my problem: http://codepen.io/sanderfish/pen/jWpbrv

Added all relevant code. I can't get the solution in the possible duplicate to work. Had tried that already. — Sanderfish, Feb 01 '16 at 16:33
From the possible duplicate post, i think `#allhouses__dropdown option:checked { // ... font-size style ... //}` does the work. — Mehran Torki, Feb 01 '16 at 16:43

hungerstar · Answer 1 · 2016-02-01T16:45:20.077

0

Try something like:

option[selected] {
  font-size: 3em;
  color: blue;
}

This will target the select option tag that has the selected attribute applied to it. It will not, if you open the dropdown and selected something else, style that option tag. If you're looking for that to happen you'll likely have to resort to JS and adding a CSS class to the selected option tag.

Styling <option> tags is fairly limited so don't be surprised if you can't do everything that you'd like to do.

edited Feb 01 '16 at 16:45

answered Feb 01 '16 at 16:42

hungerstar

21,206
6
50
59

That may work - but as hungerstar said, the option stylings are VERY limited. I would bet that you cannot do what you want. Instead, you should be setting up a fully custom select box using HTML and jquery (not exactly what you wanted to hear I'm sure). – Matthew Lymer Feb 01 '16 at 16:44

Style selected option while using box

1 Answers1