1

Background: we have an application that uses Select2's exclusively (though specific library is irrelevant all things considered). We really have no need for these select's as we are moving away from using them for anything complicated or extensive (no autocomplete or search). We are primarily using them for the style purpose, having the dropdown match the custom button look we are using.

My question: unless needing specific libraries for complicated selects, is it ultimately best practice to just scrap these libs and rely on native selects all throughout, desktop + mobile? We intend to custom style the select but have the options and list be native with no custom styles.

I've been seeing this pattern frequently, airbnb being a good example.

airbnb-select-trigger

airbnb-select-open

1

There's no best practice when deciding on whether or not to style your inputs. There are however strict rules for consistency.

Do not mix select libraries or use different styles for a particular element. If you want all form elements to look the same you may go ahead and do it.

At the end of the day: If a user can select a country in a drop down list and submit a form then they're happy. If any styling is impeding on the user's ability to submit the form (be it on mobile or desktop) then you as an application developer have failed.

Sidenote

From my experience as Front-end Developer overhaulling interfaces of a multi-million user base application for a Bank.

  • 1 in 100,000 users will compliment you on how nice (and uniform) the site looks.

But if a form doesn't work for whatever reason:

  • 1 in 1,000 might email you directly
  • 1 in 10 will complain and bad mouth your corporate identity on social media.

(PS: I was only a Front-end developer on that project. IMO the team of UX designers made a real mess of it all)

0

The biggest limitation that you will face with styling a select on your own is that you cannot style the option list beyond very basic font settings. Even basic style changes such as padding are not supported. A replacement select will use a combination of DIV and SPANs to emulate a select, thereby giving you a lot more styling options. If your requirement for a select's styling does not require the options to be styled, then you are fine with the standard HTML control.

If you want additional niceties such as the ability to search long lists, fetch values remotely based on a user-provided filter, tokenized representation of the selected value, images in the options, and similar features, you'd be better off using a library such as Chosen

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.