input clear icon

GitHub

An icon for clearing text appears on the focused <input>.

Usage

See README on GitHub

Icon Styling

  • Stroke width can be selected.
  • "input-clear-icon" is the tag name of the clear icon that can be used as a CSS selector.
<style>
  input-clear-icon {
    /* common style */
  }
</style>
  • "data-input-clear-icon-class" attribute of the input element is applied as the class name.
<style>
  .my-clear-icon {
    color: rgb(64, 128, 255);
    text-shadow: 2px 1px 2px rgba(64, 128, 255, .7);
  }
  .my-clear-icon:hover {
    color: white;
    background-color: rgb(64, 128, 255) !important;
  }
</style>
<input
  data-input-clear-icon-class="my-clear-icon"
  value="blue"
>
  • "data-input-clear-icon-style" attribute of the input element is applied as the inline style.
<input
  data-input-clear-icon-style="color: #ff4040; border-color: #ff8080; background-color: #fff0f0; border-radius: 50%; font-size: 9px;"
  value="red circle"
>

Input elements cared by this library

<input>
<input type="text">
<input type="password">
<input type="number">
<input type="url">
<input type="email">
<input type="tel">
<input type="search">

Input elements NOT cared by this library

With attribute "data-input-clear-icon-hidden"
<input data-input-clear-icon-hidden>
Readonly / Disabled
<input readonly>
<input disabled>
Date / Time
<input type="date">
<input type="time">
<input type="month">
<input type="week">
<input type="datetime-local">
Textarea
<textarea>
Non-text
<input type="button">
<input type="reset">
<input type="submit">
<input type="image">
<input type="checkbox">
<input type="radio">
<input type="file">
<input type="color">
<input type="range">
<select>