-1

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

Improve this question
5
  • 1
    Please post all relevant code directly in the question. Commented Feb 1, 2016 at 16:24
  • What's $primary-color? Commented Feb 1, 2016 at 16:24
  • Added all relevant code. I can't get the solution in the possible duplicate to work. Had tried that already. Commented Feb 1, 2016 at 16:33
  • 1
    Your h1 tag is being closed inside your <select> tag. Commented Feb 1, 2016 at 16:39
  • From the possible duplicate post, i think #allhouses__dropdown option:checked { // ... font-size style ... //} does the work. Commented Feb 1, 2016 at 16:43

1 Answer 1

Reset to default
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.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

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).

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.