2

I would like to style simple <select> elements. Here's the two types of markup I'd like to style:

  1. Regular selects:

    <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>
    
  2. With optgroups:

    <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 plain selects.
  • Desktop browser support: IE8+, latest 2 Chrome/Firefox/Safari versions.
  • Mobile browser support: iOS 7+, Android 2.3+.
  • Basic styling of the select and option boxes (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).

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?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.