Easily Add Clear Buttons to Text Inputs with Zebra_ClearInput

Zebra_ClearInput is a super tiny jQuery plugin that allows your users to easily clear values from input fields by attaching a small clear icon. 

With a single click on this icon, users can immediately clear any text they've entered. The clear icon becomes visible once the user begins typing in the input field. It then reappears on mouse hover after the field loses focus.

How to use it:

1. Download and add the Zebra_ClearInput plugin's files to the web page.

<!-- jQuery Is Required -->
<script src="/path/to/cdn/jquery.slim.min.js"></script>

<!-- jQuery Zebra_ClearInput Files -->
<link rel="stylesheet" href="/dist/zebra_clearinput.min.css" />
<script src="/dist/zebra_clearinput.min.js"></script>

2. Call the function Zebra_ClearInput on your input field(s) and the plugin will do the rest.

<input type="text" />

$(document).ready(function() {
  var clearInput = new $.Zebra_ClearInput('input[type="text"]');
});

3. Apply custom styles to the clean icon.

$(document).ready(function() {
  var clearInput = new $.Zebra_ClearInput('input[type="text"]',{
      container_class_name: 'Zebra_ClearInput_Container',
      button_class_name: 'Zebra_ClearInput'
  });
});

4. Destroy the plugin.

clearInput.destroy();

Changelog:

v1.0.1 (2023-09-18)

• improved management of button and text overlapping

---

This awesome jQuery plugin is developed by stefangabos. For more Advanced Usages, please check the demo page or visit the official website.