how to get the behavior of search input with the clear "x" button on regular text input?

user_2413332 0
Viewed 259

I'm trying to get the behavior of <input type="search"> on regular <input type="text">.

I tried to use the appearance: searchfield; which didn't applied this special behavior.

How I want it to look: enter image description here

CodePen Example (Tested on Chrome Browser, and it doesn't work)

Searching for a pure CSS/HTML solution

css html
2 Answers

Demo: https://codepen.io/vsync/pen/MWjdbgL

Presented here three ways of solving the issue:

1️⃣ When the input element has no focus, its type is set to search, which then shows the x (clear button), and when the element has focus - its type is set to text 

<input type="search" 
       onmouseup="this._timer=setTimeout(el=>{el.type='text'},0,this)" 
       onblur="clearTimeout(this._timer);this.type='search'" 
/>

2️⃣ Wrap the input with a <form> element so it could be cleared using native
<button type='clear'>

input{ padding:.5em; font:1em Arial;}
input[type='text']:placeholder-shown + button{ opacity:0; pointer-events:none;}

form{ display:inline-block; position: relative; }
form:hover input[type='text']:not(:placeholder-shown) + button{ opacity: 1 }
form button{
    --size: 18px;
    position: absolute;
    border: none;
    display: block;
    width: var(--size);
    height: var(--size);
    line-height: var(--size);
    font-size: calc(var(--size) - 3px);
    border-radius: 50%;
    top: 0;
    bottom: 0;
    right: calc(var(--size)/2);
    margin: auto;
    background-color: salmon;
    color: white;
    padding: 0;
    outline: none;
    cursor: pointer;
    opacity: 0;
    transition: .1s;
}
<form>
  <input type='text'  placeholder=' ' />
  <button type='reset'>&times;</button>
</form>

3️⃣ Use a non-<form> wrapper and javascript

input{ padding:.5em; font:1em Arial; }
input[type='text']:placeholder-shown + button{ opacity:0; pointer-events:none;}

.inputWrap{ display:inline-block; position: relative; }
.inputWrap:hover input[type='text']:not(:placeholder-shown) + button{ opacity: 1 }
.inputWrap button{
    --size: 18px;
    position: absolute;
    border: none;
    display: block;
    width: var(--size);
    height: var(--size);
    line-height: var(--size);
    font-size: calc(var(--size) - 3px);
    border-radius: 50%;
    top: 0;
    bottom: 0;
    right: calc(var(--size)/2);
    margin: auto;
    background-color: salmon;
    color: white;
    padding: 0;
    outline: none;
    cursor: pointer;
    opacity: 0;
    transition: .1s;
}
<div class='inputWrap'>
  <input type='text'  placeholder=' ' />
  <button type='reset' onclick='this.previousElementSibling.value=""'>&times;</button>
</div>

user_1043800 
<html>
    <head>
        <style>
            .border-0{
                border: none;
            }
            .search-border{
                border: 1px solid;
                border-radius: 5px;
                width: 200px;
                display: flex;
                align-items: center;
            }
        </style>
    </head>
    <body>      
         <div class="search-border">
            <input type="text" placeholder="Search" class="border-0">
            <img src="/assets/close-icon-light.svg">      
         </div>       
    </body>
</html>

Hi, Please try this code if this satisfies you. Use width of your choice for the search box. Also use a suitable close icon.

user_144564760
Related