Clear Icon Inside Input Text

Clear icon inside input text

Add a type="search" to your input

The support is pretty decent but will not work in IE<10

<input type="search">

How do I put a clear button inside my HTML text input box like the iPhone does?

Since HTML5, you could use <input type="search">. But this isn't necessarily customizable. In case you'd like to have full control over the UI, here are two kickoff examples. One with jQuery and another without.

With jQuery:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>SO question 2803532</title>
        <script src="https://code.jquery.com/jquery-latest.min.js"></script>
        <script>
            $(document).ready(function() {
                $('input.deletable').wrap('<span class="deleteicon"></span>').after($('<span>x</span>').click(function() {
                    $(this).prev('input').val('').trigger('change').focus();
                }));
            });
        </script>
        <style>
            span.deleteicon {
                position: relative;
                display: inline-flex;
                align-items: center;
            }
            span.deleteicon span {
                position: absolute;
                display: block;
                right: 3px;
                width: 15px;
                height: 15px;
                border-radius: 50%;
                color: #fff;
                background-color: #ccc;
                font: 13px monospace;
                text-align: center;
                line-height: 1em;
                cursor: pointer;
            }
            span.deleteicon input {
                padding-right: 18px;
                box-sizing: border-box;
            }
        </style>
    </head>
    <body>
        <input type="text" class="deletable">
    </body>
</html>

Show/hide clear icon inside input field not working properly

Just change click to mousedown because blur fires sooner than click event and deletes the click event and put click event in focus event.

$(document).ready(function(){  $(".material-icons").hide();  $("input")  .focus(function() {    $(this).attr("placeholder", "enter your email address...");    $(".material-icons").show();    $(".clear-input").mousedown(function(e) {      e.preventDefault();      $(this).prev().val("");    });  })  .blur(function() {    $(".material-icons").hide();    $(this).attr("placeholder", "input here");  });});

html {  box-sizing: border-box;}
form {  margin: 20vh;}
.container {  border: none;  width: 248px;  position: relative;}
input {  border: 1px solid pink;  box-shadow: none;  padding: 8px 100px 8px 5px;  position: relative;}
input:hover {  border: 1px solid #222;}
input:focus {  border: 1px solid blue;}
.material-icons {  position: absolute;  right: 0px;  top: 0px;  margin: auto;  font-size: 3px;  cursor: pointer;  color: #aaa;  padding: 8px;}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><form>  <div class="container">    <input class="type-here" type="text" placeholder="input here" />    <i class="clear-input material-icons">clear</i>  </div></form>

Add x clear/dismiss button inside a input of type text with css and not a gif

You could do something like this, put the text field in a div along with an x (× entity) with a class and then write your jQuery to run that close x to remove the field:

.email-input {  display: inline-block;  height: 40px;  width: 100%;  font-size: 15px;  color: #666666;  text-indent: 8px;  border: 1px solid #2d2d2d;}
.text-field-position {position: relative;}
.text-field-position span {position: absolute;right: 1em;top: 0;bottom: 0;line-height: 40px;}

<div class="text-field-position"><input id="try-different-email" type="text" name="email" placeholder="Email" class="email-input"><span class="removeClick">×</span></div>

x clear icon appears only when the input has value - react

You can conditional render the icon based on the value of the input field. Maintain a state for the value using the useState hook. onChange will trigger everytime you enter a value into the input field and set the state.

export default function Search() {
  const inputElt = useRef(null);
  const [value,setValue] = useState('')

  return (
    <form className='flex'>
     <input
        ref={inputElt}
        className='flex-grow focus:outline-none cursor-pointer'
        type='search'
        value={value}
        onChange={(e) =>setValue(e.target.value)}
    />
    {value && <XIcon className='h-5' />}
)
}

Put icon inside input element in a form

The site you linked uses a combination of CSS tricks to pull this off. First, it uses a background-image for the <input> element. Then, in order to push the cursor over, it uses padding-left.

In other words, they have these two CSS rules:

background: url(images/comment-author.gif) no-repeat scroll 7px 7px;
padding-left:30px;

How to add clear icon in input fields using materializecss

you'll have to implement that, not very complicated, you add an eventListener for when input's value changes , the event is called input and whenever the value changes you see if it's not empty you display the button, otherwise you hide it

and another eventListener on the button to set the value to empty and hide itself when it's clicked,

materializecss is primarily for styling , and it's up to you to put the button inside the input with margins or positioning

const button = document.getElementById('clear')const myInput = document.getElementById('myInput')
myInput.addEventListener('input', function(){    if(this.value != "") button.style.opacity = 1    else button.style.opacity = 0});
button.addEventListener('click', function(){    myInput.value = "";    this.style.opacity = 0});

*{    box-sizing: border-box;}#myInput{    padding: 0 5px;    }#clear{    opacity: 0;    float: right;    position: relative;    top: -55px;    transition: opacity 0.2s linear}

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script><link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css" rel="stylesheet"/><div class="row" >  <div class="input-field col s12">    <input id="myInput" type="text" class="validate">    <label for="email">myInput</label>    <a class="waves-effect waves-light btn" id="clear">Clear</a>    </div></div>

Clear Icon Inside Input Text