An example of the “Shell Approach” as seen in
Home Depot’s checkout. Note how the drop-down in it’s default closed state uses a custom design for improved aesthetics (left image), but when the drop-down is opened it falls back to use a native drop-down (right image).
In a ‘Shell Approach’, a custom designed UI is shown in the default collapsed state of the drop-down, but
when users interact with it, the native drop-down is instead served. This way, the drop-down can easily match the site’s visual styling and brand guidelines in its collapsed state, yet there’s no need to spend resources re-developing native browser capabilities using advanced JavaScript.
If the desire for a custom drop-down is purely rooted in aesthetics, we’d strongly encourage this ‘Shell Approach’ over developing a fully custom drop-down. The ‘Shell Approach’ is significantly cheaper to implement initially, requires far less maintenance, offers better compatibility with older devices and browsers, and is more flexible in supporting future web evolvements (i.e. accessibility, voice control, interface-less sites, etc.) since all of the selection logic relies on native HTML elements.
However, if relying on the ‘Shell Approach’, make sure to design a very clear styling for when the semi-custom drop-down has keyboard focus, as the majority of implementations using the ‘Shell Approach’ forget this important element – effectively disrupting users’ tabbing flow.