https://github.com/chantastic/select.css
https://github.com/chantastic/select.css
Last synced: about 1 year ago
JSON representation
- Host: GitHub
- URL: https://github.com/chantastic/select.css
- Owner: chantastic
- Created: 2014-12-10T00:25:40.000Z (over 11 years ago)
- Default Branch: master
- Last Pushed: 2016-11-28T19:23:12.000Z (over 9 years ago)
- Last Synced: 2025-02-26T22:06:43.655Z (over 1 year ago)
- Language: HTML
- Homepage: https://chantastic.org/select.css/
- Size: 17.6 KB
- Stars: 3
- Watchers: 3
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.markdown
Awesome Lists containing this project
README
# 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](http://wtfforms.com/),
[mailchimp](https://mailchimp.com/),
and [foundation](http://foundation.zurb.com/).
It's been 2 years now. So they could have totally moved on.
## Install
#### NPM
`npm install select.css@0.1.0`
#### Script tag
``
## Use
```html
...
```
### 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:
```css
.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.
```css
/*! 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;
}
```