Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/luncheon/input-clear-icon
An icon for clearing text appears on the focused <input>.
https://github.com/luncheon/input-clear-icon
form input vanilla-js
Last synced: 4 days ago
JSON representation
An icon for clearing text appears on the focused <input>.
- Host: GitHub
- URL: https://github.com/luncheon/input-clear-icon
- Owner: luncheon
- License: wtfpl
- Created: 2018-02-02T10:04:01.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2018-04-09T04:09:09.000Z (over 6 years ago)
- Last Synced: 2024-12-13T21:14:39.908Z (10 days ago)
- Topics: form, input, vanilla-js
- Language: HTML
- Homepage: https://luncheon.github.io/input-clear-icon/demo.html
- Size: 84 KB
- Stars: 1
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# input-clear-icon
An icon for clearing text appears on the focused <input>.
[Demo](https://luncheon.github.io/input-clear-icon/demo.html)
* No dependencies
* Lightweight (CSS + JS = about 2kB gzipped)
* Minimal side effects
* [Simplest usage](#usage)
* [Stylable](#styling)
* Various icon stroke width
You can easily try it out with just adding the stylesheet and the script.
## Usage
### via CDN
1. Apply the stylesheet.
```html
```
2. Load the script.
```html
```
3. Place input elements as usual.
### via npm
1. Install this package.
```bash
$ npm install input-clear-icon
```
2. Bundle the stylesheet and the script.
```javascript
import 'input-clear-icon/input-clear-icon.regular.css';
import 'input-clear-icon/input-clear-icon.js';
```
3. Place input elements as usual.
## Styling
* "**input-clear-icon**" is the tag name of the clear icon that can be used as a CSS selector.
* "**data-input-clear-icon-class**" attribute of the input element is applied as the class name.
* "**data-input-clear-icon-style**" attribute of the input element is applied as the inline style.
See the [demo](https://luncheon.github.io/input-clear-icon/demo.html) for example.
## License
WTFPL