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 trialAndrew Kenower
3,069 PointsStyling <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
26,676 PointsHi 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
30,545 PointsYou 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
266 PointsIn 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.