Put icon inside input element in a form

Configure icons with CSS backgrounds

Here, being an artist pays off. Use the mighty background-image CSS property to paint your input field. Suitable when icon integration as part of the input style is your jam:

.input-with-icon {
  background: url('icon-search.png') no-repeat 10px center; /* Image in place, no repeats, like my fav playlist */
  padding-left: 35px; /* Breaks the space-time overlap between text and icon */
}


To incorporate this in your form:

<input type="text" class="input-with-icon">


For the iconsizer, apply background-size to make it homely within the input and set background-repeat to no-repeat.

Click event handlers: Icons in Action

Icons can be more than eye-candy. When interacted, like clicking on them, they may perform specific actions. Wrap both icon and control within a label or div, let JavaScript handle the actions:

<div style="position: relative;">
  <input type="text" id="search">
  <label for="search" style="position: absolute; right: 10px; cursor: pointer;">❌</label> /* Your personal text sweeping assistant */
</div>


document.querySelector('label').addEventListener('click', function() {
  document.getElementById('search').value = '';
}); /* This just Thanos-snapped your search query */


Cross-browser compatibility tricks

Browser diversity is an age-old reality. Confirm that your masterpiece works across all browsers. Modern browsers are good with prior techniques, but for the older relics, encapsulate the icon and input within a div with a border. It's like a time machine going back to offer support for legacy wonders!

Advanced use-cases

Interactive icon: From basic to dynamic

An input can go live responding to user keystrokes. A nifty scenario: revealing an X to clear the input once it's populated:

<div style="position: relative;">
  <input type="text" style="padding-right: 20px;" oninput="toggleClearIcon(this)"> /* write and the magical X appears */
  <i style="position: absolute; right: 0; top: 0; cursor: pointer;">❌</i>
</div>


function toggleClearIcon(inputElement) {
  const clearIcon = inputElement.nextSibling;
  if (inputElement.value.length > 0) {
    clearIcon.style.display = 'block'; /* Icon's grand entrance! */
  } else {
    clearIcon.style.display = 'none'; /* Abracadabra! The icon disappears */
  }
}


Designing emotion: Icon for validation feedback

Icons can wear an emotion reflecting user input validation: a tick for success or an exclamation for error. It makes forms more alive, interactive, and user-friendly.

Pro-Tip: Make it accessible

Ensure accessibility is on point. Provide alt text if your icon relays critical info, or use aria-label on the input for our friends at the screen readers.