Select vs dropdown

Here at Bitmaker, we’re developing a complex website with a tight deadline and I just got stuck with a conundrum, select box or dropdown.

Dropdown design

My first choice was to use a select box, mainly because it would open the default select list on a mobile phone. The mobile experience is a major concern for our client so using a select box just made sense. The problem is styling it across different browsers.


So, you can see why I’m stuck. Should I just use a dropdown custom element and neglect the mobile experience or is there a way to style the select box across all browsers, Internet Explorer (IE) included?

First try; remove select box appearance.

-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
appearance: none

This removes the select box style across most browsers, yes, of course, IE doesn’t care:

appearance: none, internet explorer

I went to Bootstrap for help and they have a custom select option on version 4 (alpha):

// Select
// Replaces the browser default select with a custom one, mostly pulled from
// Includes IE9-specific hacks (noted by ` \9`).
.custom-select {
display: inline-block;
max-width: 100%;
padding: $custom-select-padding-y ($custom-select-padding-x + $custom-select-indicator-padding) $custom-select-padding-y $custom-select-padding-x;
padding-right: $custom-select-padding-x \9;
color: $custom-select-color;
vertical-align: middle;
background: $custom-select-bg $custom-select-indicator no-repeat right $custom-select-padding-x center;
background-image: none \9;
background-size: $custom-select-bg-size;
border: $custom-select-border-width solid $custom-select-border-color;
@include border-radius($custom-select-border-radius);
// Use vendor prefixes as `appearance` isn't part of the CSS spec.
-moz-appearance: none;
-webkit-appearance: none;
&:focus {
border-color: $custom-select-focus-border-color;
outline: none;
@include box-shadow($custom-select-focus-box-shadow);
&::-ms-value {
// For visual consistency with other platforms/browsers,
// supress the default white text on blue background highlight given to
// the selected option text when the (still closed) <select> receives focus
// in IE and (under certain conditions) Edge.
// See
color: $input-color;
background-color: $input-bg;
&:disabled {
color: $custom-select-disabled-color;
cursor: $cursor-disabled;
background-color: $custom-select-disabled-bg;
// Hides the default caret in IE11
&::-ms-expand {
opacity: 0;
.custom-select-sm {
padding-top: $custom-select-padding-y;
padding-bottom: $custom-select-padding-y;
font-size: $custom-select-sm-font-size;
// &:not([multiple]) {
// height: 26px;
// min-height: 26px;
// }

It works on all browsers and I get that native experience on a mobile phone. Also, learned a new hack: \9, as you can see here

background-image: none \9;
This simply means that the one specific line of CSS ending with a \9; in place of the ; is only valid in IE 7, 8, & 9. —
IE custom dropdown

I’m sticking with it for now, but what are your thoughts? Would you favor user experience over design and keep the native style? Or would you just use a dropdown?

Show your support

Clapping shows how much you appreciated Barbara Mendes’s story.