Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

HTML HTML Forms Choosing Options Select Menus

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,650 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

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

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.