https://github.com/bluegrassdigital/blue-select
A simple, class-based, styled/custom html select implementation
https://github.com/bluegrassdigital/blue-select
class custom-select javascript select
Last synced: about 2 months ago
JSON representation
A simple, class-based, styled/custom html select implementation
- Host: GitHub
- URL: https://github.com/bluegrassdigital/blue-select
- Owner: bluegrassdigital
- License: mit
- Created: 2017-02-27T09:48:18.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2019-02-18T14:41:24.000Z (about 6 years ago)
- Last Synced: 2025-03-09T16:37:16.375Z (2 months ago)
- Topics: class, custom-select, javascript, select
- Language: JavaScript
- Size: 82 KB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# blue-select
A small, flexible custom select widget class. Works seamlessly with blue-widgets or standalone.
Check out the [examples](https://bluegrassdigital.github.io/blue-select/#/page/docs/examples.md)
## Installation
This is a UMD module, so can be consumed any way you like
Install via npm `npm install blue-select --save`
Or include `blue-select.js` from the `./dist` folder in your page
### CommonJS
```javascript
var BlueSelect = require('blue-select')
var el = document.querySelector('#foo')
new BlueSelect(el)
```
### ES2015 module
```javascript
import BlueSelect from 'blue-select'
const el = document.querySelector('#foo')
new BlueSelect(el)
```
### Standalone
```html
Please select
Option 1
Option 2
Option 3
var el = document.querySelector('#foo')
new BlueSelect(el)
```
## Styling
The module implements BEM class naming for the fake value and arrow elements it creates. The 'block' class name is taken from the first class present on the container element on which you instantiated the class. So in the above case the classes would be: `.select`, `.select__value` and `.select__arrow`
Some CSS will be required to hide the select and style the arrows and fake value, none is included in the script. This implementation is left to you.
When the select is focused the container will have an `is-focused` state class
This is the base level of styling required:
```CSS
.custom-select {
position: relative;
}
.custom-select select {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
opacity: 0;
font-size: inherit;
z-index: 1;
}
```
## Contributing to blue-select
[Standard JS](http://standardjs.com/) applies
camelCase for function and variable names
Standard [Github Flow](https://guides.github.com/introduction/flow/) - branch, submit pull requests
### Getting set up
- Pull the repo
- run `npm install` or `yarn install`
- run `npm run build` to compile the dist version