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.
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;
This removes the select box style across most browsers, yes, of course, IE doesn’t care:
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
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?