Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML HTML Forms Choosing Options Select Menus

Andrew Kenower
Andrew Kenower
3,069 Points
Posted by Andrew Kenower
Andrew Kenower
3,069 Points

Styling <option>?

I'm curious what styles can be applied to options. I noticed that margin/padding/line-height didn't affect them. I just think they look a little close together and think the default indent looks a little wonky.

Is there also a way to change the hover color and pointer state?

3 Answers

Chris Shaw
Chris Shaw
26,676 Points
Chris Shaw
Chris Shaw
26,676 Points

Hi Andrew,

The default UI for drop downs doesn't allow for these changes as their implementations are slightly inconsistent and no spec has been written by the W3C in regards to this but vendors such as Google and Firefox have implemented their own additions for overriding the default styles using the appearance property and setting it's value to none.

I would avoid using this method though as it's not official and is subject to change at any time therefore working code can break without warning between versions, for true customisation you would need to use a library dedicated to replacing the default select element with custom markup such as selectBoxIt.js which meets the requirements set by the ARIA recommendation, keyboard support and complete customisation.

Hope that helps.

Andres Aguero
Andres Aguero
30,545 Points
Andres Aguero
Andres Aguero
30,545 Points

You are able to CSS your <option> Here I attached css to change hover state

option{ background-color:#000; color:#fff; margin-left:60px; } option:hover{ background-color:fff; color:#000; } option:active{ background-color:#EEE; }

Ben Brenton
Ben Brenton
266 Points
Ben Brenton
Ben Brenton
266 Points

In my own project, I have managed to attach a previously used style on my table. Below is the HTML code I have used:

 <section class="section" id="primary">
</section>
<section class="section" id="secondary">
</section>

.section is my style class, the primary and secondary ids are for responsive CSS. See if this works for you.