https://github.com/the-couch/droptop

Tiny, zero-config, accessible replacement for native select inputs.
https://github.com/the-couch/droptop

Last synced: 4 days ago
JSON representation

Tiny, zero-config, accessible replacement for native select inputs.

• Host: GitHub
• URL: https://github.com/the-couch/droptop
• Owner: the-couch
• Created: 2018-02-21T20:10:00.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2018-02-22T16:49:36.000Z (over 6 years ago)
• Last Synced: 2024-11-01T19:03:03.169Z (11 days ago)
• Language: JavaScript
• Size: 81.1 KB
• Stars: 6
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# droptop

Tiny, zero-config, accessible replacement for native select inputs. Falls back

to native for mobile browsers. **1.6kb gzipped.**

## Install

```bash

npm i droptop --save

```

# Usage

```javascript

import droptop from 'droptop'

droptop(document.getElementById('select'))

```

## Styles

You'll want to start with something like this:

```css

.droptop-button {

  display: block;

  padding: 1em 6em;

  background: white;

  border: 2px solid black;

}

.droptop {

  position: absolute;

  z-index: 9999;

  top: 0; left: 0;

  border: 2px solid black;

  margin-top: 0.5em;

}

.droptop__inner {

  max-height: 200px;

  overflow: auto;

}

.droptop__option {

  display: block;

  padding: 1em 6em;

  background: white;

  border: 0;

  width: 100%;

}

.droptop__option:focus {

  background: whitesmoke;

  outline: 0;

}

```

## License

MIT License © [Eric Bailey](https://estrattonbailey.com)