Cross-browser select element CSS for consistent select element styling.
Available on npm:
npm install fg-select-css
Include the following file:
src/select-css.css: main component code
Its CSS will style any select with a class of
Notes on the CSS
The CSS for this is fine to use as-is, but if you're editing it at all, you might want to be aware of a few numbers and values that help it look right.
selectis set to
display: blockby default but you can style it
display: inline-block; width: auto;if you'd like it to sit alongside a
- The background of the
selectis created using two background images: the first is an svg arrow icon (expressed inline as a data URI) and the second is a repeating linear gradient. Either URL could be an external image if you'd like. If you change the icon image, be aware that its size is set in the first section of the later
background-size: .65em auto, 100%;property. And its position is set via
background-position: right .7em top 50%, 0 0;(which is
.7emfrom the right side, respectively). Also, if the size changes, you might want to make more right padding on the button so that it doesn't overlap the
select's text, but be aware that in IE9 and older, the custom arrow will not appear, and the browser's default arrow will show to the left of the padding, so don't add too much there or IE9's arrow will be inset really far.
- The linear gradient background is important to keep, because its presence actually prevents IE9 and older from recognizing the background property, and as a result it won't show the custom icon alongside its unhideable native one. If you want a flat color, use a linear gradient between two of the same color values.
appearancerule and its and prefixed versions are important to unset some default browser
font-size: 16px;rule is important because iOS Safari will zoom-in the site layout if the
select's text is less than 16px. Generally, this behavior is annoying so we try to avoid it with a 16px font size on
optionelements from inheriting the bold font weight of the
- As noted in Scott O'Hara's article, setting background color on the
select(though not background image as I've used here, can cause
optionelements to inherit background colors as well, which can cause problems. So avoid doing that. )
.select-css::-ms-expandrule instructs IE11 and IE10 to hide the menu icon pseudo element, so the custom icon behind it can appear. Thanks for the tip, Jelmer de Maat.