input-clear-icon
An icon for clearing text appears on the focused <input>.
- No dependencies
- Lightweight (CSS + JS = about 2kB gzipped)
- Minimal side effects
- Simplest usage
- Stylable
- Various icon stroke width
You can easily try it out with just adding the stylesheet and the script.
Usage
via CDN
- Apply the stylesheet.<!-- Select the stroke width of the icon from "thin", "extralight", "light", "regular", "medium", "semibold", "bold", "extrabold", "black".This is the case of "regular" stroke width. -->
- Load the script.
- Place input elements as usual.
via npm
- Install this package.$ npm install input-clear-icon
- Bundle the stylesheet and the script.;;
- 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 for example.
License
WTFPL