select.css

A stupid, styleable, scalable class for selects.

Why?

I wanted a cross-browser select that I could easily style and npm install.

This isn't clever. It controls the shape and doesn't try to hard about override the browser's default disclosure button.

FF<34 and FF35+

IE9 and IE10 (with ie9-select.css)

Prior art

I borrowed techniques from wtfforms, mailchimp, and foundation.

It's been 2 years now. So they could have totally moved on.

Install

NPM

npm install [email protected]

Script tag

<link rel="stylesheet" href="https://unpkg.com/[email protected]" />

Use

<select class="select">
  ...  
</select>

Theming

BYOTheme.

The base .select class sets a few colors, just in case you really don't want to think about anything.

In most cases, you'll probably color the selects to match your app. Themes look like this:

.select {
  background-color:#fcfcfc;
  border-color:#d7d7d7;
  color:#3f3f3f;
}
.select:hover {
  background-color:#eee;
  border-color:#c4c4c4;
}

IE9

Include the ie9-select.css file if you need IE9 support. It just changes a couple styles to make the default disclosure button fall in a better spot.

DON'T SET background

It's important not to set backrgound. It'll remove the little disclosure chevron. If you want to change the background-color, set background-color.

Code

This is all the code there is.

/*! select.css */
.select{
position:relative;
background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMTJweCIgeT0iMHB4IiB3aWR0aD0iMjRweCIgaGVpZ2h0PSIzcHgiIHZpZXdCb3g9IjAgMCA2IDMiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDYgMyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBvbHlnb24gcG9pbnRzPSI1Ljk5MiwwIDIuOTkyLDMgLTAuMDA4LDAgIi8+PC9zdmc+);
background-position:right center;
background-color:transparent;
background-repeat:no-repeat;
background-size:2em auto;
display:inline-block;
vertical-align:middle;
cursor:pointer;
-webkit-appearance:none;-moz-appearance:none;appearance:none;
border-radius:.25em;
border-width:1px;
border-style:solid;
height:2em;
font-size:1em;
padding:0 2em 0 .5em;
/* default theme */
background-color:#fcfcfc;
border-color:#d7d7d7;
color:#3f3f3f;
}