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
Joe Consterdine
13,965 PointsHow to hide a select box and style elements on top? Example shown.
Hey guys,
I have seen a few examples of select boxes been hidden and buttons/other elements on top but still using the select options.
So because select boxes can't be styled too well people somehow style buttons and when the user clicks on the button they are still selecting the select options.
I'm not sure how though!
see this example:
http://journal.digital-atelier.com/6/index.php?route=product/product&product_id=273
if you look under 'Available Options'. The sizes 'XL', 'L' etc are been styled by list items but the select is running behind the scenes.
How is this done?
Thanks!
2 Answers
Kevin Korte
28,149 PointsThe nuts and bolts are hard to pull off well, because there is expected functionality that a dropdown provides across all browsers and OS's, and a good implementation of this will keep this functionality. If this is done poorly, it can hurt the UX more than the better looking "dropdown" is worth.
There are lots of plugins that do this, some better than others. Some other devs are just against doing this at all. I'm on the fence. I think if it's going to be done, it has to be done well.
But in short, you hide the select, and than you have event listeners listening for selections made on the list items, and then that happens, you have javascript set the hidden select dropdown to the correct selection, and that's what gets submitted when the form submits.
Things to look out for is that dropdowns provide key up, and key down support, as well as "search-able", so I feel it's important that your javascript allows for those same features.
To get really into it, find a plugin, or a few plugins and read through the source code.
Joe Consterdine
13,965 PointsThanks Kevin
Kevin Korte
28,149 PointsNo problem,
Probably the best select manipulator out there now is https://select2.github.io/
It's definitely themeable, and has a lot of options baked in.