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.

Chrome

Firefox

Safari

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
// http://primercss.io.
//
// 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 https://github.com/twbs/bootstrap/issues/19398.
      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. — http://stackoverflow.com/questions/8004765/css-9-in-width-property

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?