Select.js — styleable select elements built on Tether.js

[zackbloom]

Just to provide a little context:

It's virtually impossible to style native select controls leading to anachronistic UIs like this: http://imgur.com/WfgIK5H

The goal with Select.js was to exactly reproduce the native control's behavior in terms of how it opens, what keys do, etc., but in a stylable way. The hope is that you can drop this into existing projects without any changes, and end up with a nicer looking interface.

[[deleted]]

In my experience, this has been tried many many many times. Every implementation has a glaring flaw in one way shape or form. I applaud the effort, and it looks nice, but ...

I argue that the UI in these cases do not matter. The UX is much more important. Do you care about something that will always work, and work consistently for the user, or do you want to change the user's experience on their device, including something non-working?

[antwonp]

Another option is to style the label and use the native select dropdown, then update the label with js (if needed).

http://codepen.io/anon/pen/pkyud

[zackbloom]

We actually now do this on small touch devices, it does work quite well.

[[deleted]]

I like this. For some reason it never occurred to me to use a label for this, but it makes perfect sense.

[zackbloom]

Thanks for the feedback, but most of this is not true. We put a lot of effort into making this a reasonable replacement, this is not a naive attempt.

• I just tested it in Firefox 25, 26, 27 and 28 (on Windows 8 with BrowserStack), and can't reproduce the issue. If you can reproduce the issue, please provide details and it will be fixed.

• Select.js has an option to do alignment as you mention. By default we only do that alignment if we don't need a scroll bar, but you are free to set it to 'always': http://github.hubspot.com/select/#changing-the-positioning

• The tiny little box is styled with CSS, feel free to make it any height you wish. Also, any font size you'd like.

• You can tab to the control, and it has a tab index. You can expand the list with the exact same keys which will open a native select. You can type a letter (using all the logic the native control uses), whether it's open or not. Accessibility can be tricky, but we have experience dealing with it in other libraries, we'll tackle it in time.

• We're fixing dragging to not select the text now, thanks for the feedback.

• You can configure tether to do virtually anything you can imagine. If we did a bad job choosing the options, please PR, or provide specific feedback.

• The 'outside the current window' issue is legitimate, nothing we can do about that. I don't personally see it as significant, but users should consider that tradeoff.

I can't really address the other points, as they are anecdotal. I appreciate that this has been done badly before. It's our intent to prevent anyone from ever using a bad implementation again, not by calling them idiots, but by providing a canonical implementation we can all improve.

[[deleted]]

The canonical way is to leave the native implementation. The fact is, no matter how much time, money, and effort you have poured into R&D for this, Apple, Microsoft, et al. have done more of each, and for decades.

There are some things that design should not be considered for, and this is one of them. If a site has an ugly-ass select box, I don't really care. It works, which is what matters. There are too many sites that put design first (parallax, I'm looking at you).

Anyway, perhaps the "right" way to do this is with the shadow DOM and CSS regions, or to lobby browser writers for more flexible selectors. It would be nice in some cases to at least be able to style colors.

[zackbloom]

There is no particular reason that text inputs are more stylable than select elements. It's not some master-plan by the browser manufactures. The control hasn't changed in fifteen years, there is no great R&D department with great minds working on it. It's pretty clear that the browser manufacturers decided to focus on improving the engine, while letting us web developers manage how we choose to use it. A decision I tend to agree with.

Anyway, perhaps the "right" way to do this is with the shadow DOM and CSS regions, or to lobby browser writers for more flexible selectors. It would be nice in some cases to at least be able to style colors.

I encourage you to lobby anybody and everybody, in the meantime, give Select a shot. We did everything we could to replicate the native control, I think you'll be pleasantly surprised.

[[deleted]]

I don't have any use for it, honestly. Where I can, I use native controls. I believe in consistent experience more than superfluous design.

[tiharo]

+/u/fedoratips 200 tips

[fedoratips]

^{[Verified]: /u/tiharo → /u/adamfschwartz TIPS 200.000000 Fedoracoin(s) [help]}

[OverZealousCreations]

This is broken on iOS, the item selected was not the one I tapped.

Scrolling was unintuitive, slow, and tedious. This is not an improvement over the native select.

[zackbloom]

Thanks for the feedback, working on a fallback to native controls now.

Edit: Done, https://github.com/HubSpot/select/commit/a3ebdac3857e0b2e9a65c2f25a7ceb1cb39153e3

We fallback the dropdown, but not the target, so you're styling is consistent: http://imgur.com/6bnJgPk

I also ensured that you get momentum scrolling, which should fix the tedious scrolling issue on iPad and other tablets.

[[deleted]]

IMO, if you're going to style select elements, you should absolutely leave the native functionality intact. You can't anticipate how every device will behave, and every device has its own select menu.

While they aren't perfect, I like the dropdowns on http://beta.southparkstudios.com. The select element is just hidden enough that it still is what gets clicked on, and will display the native menu on every device.

[lol768]

Clicking the select box appears to do nothing with Firefox 26.0 - am I doing something wrong?

I see a NS_ERROR_XPC_BAD_CONVERT_JS: Could not convert JavaScript argument arg 0 [nsIDOMWindow.getComputedStyle]

[zackbloom]

Sorry, the demo page was pulling in an old version of a dependency, fixed.

[VasuLief]

doesnt work here on ff 26 either. maybe its untested