I would like to style simple <select>
elements. Here's the two types of markup I'd like to style:
Regular
select
s:<select> <option>Please choose...</option> <option>Option A</option> <option>Option with a very long text that will run off iOS screens so you can't distinghuish one from another B</option> <option>Option with a very long text that will run off iOS screens so you can't distinghuish one from another C</option> </select>
With
optgroup
s:<select> <optgroup label="group 1"> <option>Option A</option> </optgroup> <optgroup label="group 2"> <option>Option with a very long text that will run off iOS screens so you can't distinghuish one from another B</option> <option>Option with a very long text that will run off iOS screens so you can't distinghuish one from another C</option> </optgroup> </select>
Styling the default select
control is difficult, so I'm looking for a library to handle this. Here's my requirements:
Requirements
Below are my hard and fast requirements. In addition, I'd prefer a solution as "bare bones" as possible: I'm not looking to do fancy things this time around, so I'd prefer a lightweight library that has just the basics.
Must have
- "On top of" regular
select
, i.e. I need a solution that can build on an existing app using plainselect
s. - Desktop browser support: IE8+, latest 2 Chrome/Firefox/Safari versions.
- Mobile browser support: iOS 7+, Android 2.3+.
- Basic styling of the
select
andoption
boxes (borders, backgrounds, paddings, fonts). - Able to format
option
s with long text nicely1. - Open Source & usable in a proprietary codebase.
- Cost between gratis and $100.
1 Specifically, I'm trying to get rid of a mobile Safari bug where long options' texts get truncated with ellipsis without having to resort to the optgroup label=""
hack (as that's presenting new bugs on itself).
Should have
- Small footprint.
Nice to have
- Placeholders.
- Multi-select.
Not needed
- Type-to-search features.
- Advanced styling and/or templates for options.
- Fill options from Javascript, or getting them with Ajax requests.
- Theming.
- RTL support.
Tried
I'm familiar with the Chosen library, but they explain in their FAQ that it is "disabled on [mobile devices]". There's blog posts like this that have snippets to "enable" Chosen on mobile devices, but I wonder if that really works well (as well as wonder why it's not (yet) in Chosen itself, if only as an option)? Would you recommend this kind of approach?
Then there's Select2 but, it feels like overkill, because it has many features that I do not need. In addition, I've spent 2 - 3 days trying to implement a solution using it, but ran into several issues on mobile (e.g. in some cases the select2 divs pop up, but the iOS select
control also seemed to pop up). I would still like to hear if folks would recommend (against?) it?
Bottom line
Chosen seems out because it doesn't support iOS. Select2 probably has most of my requirements but has many features I wouldn't need. The only other option I could find / think of is something homebrew.
What library / approach would you recommend?