Clear icon inside input text

In-depth solutions and tricks

Padding and positioning

In our battle against overlap, we deploy a padding-right property:

/* Let's give our clear icon some space! */
input[type="text"] {
  padding-right: 30px; /* Feel free to tweak */
}


The clear icon, a background image, is positioned for an aesthetic appeal. An optimal approach is base64 encoding, reducing HTTP requests.

User interaction - engaging with the clear icon

Our spy network of Event Listeners detects and responds to the user's Valkyrie maneuvers:

/* You're grounded if you're clear. Go invisible! */
document.getElementById('myInput').addEventListener('input', function() {
  var clearIcon = this.nextElementSibling;
  clearIcon.style.visibility = this.value ? 'visible' : 'hidden';
});


Smoothening the experience

We bring some CSS Transitions into play to smoothly fade the clear icon in and out:

/* Now you see me, now you don't */
span {
  transition: visibility 0.2s, opacity 0.2s ease;
  opacity: 0;
}

input:not(:placeholder-shown) + span {
  opacity: 1;
  visibility: visible;
}


Alternative methods

HTML's <input type="search">

The magic of built-in clear icons graces <input type="search">. Check for cross-browser compatibility before taking this road.

jQuery and its armor of plugins

Using jQuery gives an advantage, toggling clear icon visibility with ease:

/* Like a magician's stick. Poof! It's gone! */
$('#myInput').on('input', function() {
  $(this).next('span').toggle(Boolean($(this).val()));
});


Dig deeper into the armory with tools like jQuery-ClearSearch for advanced clearing capabilities.

Reset to the rescue

Employing a form with a reset type (input[type="reset"]) allows multiple input field content to go kerplunk with one click.

Clever pseudo-classes

Using :invalid pseudo-class brings elegance, showing the clear icon when there is valid content in the input.

UX: Know thy user

Understand user behavior by tracking mouse movements. This leads to responsive input fields and exemplify your UX craftsmanship.

The path to mastery

Code snippets: quick start

Like a wizard, alter code snippets to align with your goals. Ensure a neat fusion of code and UX.

Testing, the hoodwink preventer

Validate the user experience through adequate testing. This ensures positive user interactions, earning you a loyal audience.

Learning from the pros

Embrace comprehensive guidance from authorities like "Dive Into HTML5: A form of Madness". It hones your skills for crafting user-centric inputs.

Interactive playgrounds

Check out interactive demos on JS Fiddle or CodePen. Play in these sandboxes to conjure the perfect clear icon setup.

CSS Classes and Data Attributes: The secret sauce

Utilize data attributes and CSS classes for an organized approach. It keeps your HTML clean and JavaScript simple.