I would like to style simple
<select> elements. Here's the two types of markup I'd like to style:
<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>
<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:
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.
- "On top of" regular
select, i.e. I need a solution that can build on an existing app using plain
- Desktop browser support: IE8+, latest 2 Chrome/Firefox/Safari versions.
- Mobile browser support: iOS 7+, Android 2.3+.
- Basic styling of the
optionboxes (borders, backgrounds, paddings, fonts).
- Able to format
options 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).
- Small footprint.
Nice to have
- Type-to-search features.
- Advanced styling and/or templates for options.
- RTL support.
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?
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?