How to stylize the "clean" icon of the input type search?

Question

How to stylize the "clean" icon of the input type search?

Navigation

#1 by (5 votes)
#2 by (3 votes)
#3 by (3 votes)

4

I need a way to style the × icon that is at the end of input[type="search"] .

The input type search when focusing on the element, it has an × if it has a value filled in.

Example:

InoticedthatwhenItypetheinputsearch,this"x" often disappears.

How can I do to stylize it and still preserve it in input[type="search"] ?

html5 css css3

asked by anonymous 22.05.2017 / 18:04

3 answers

Separate the value from the string JQuery monitoring keystrokes

score 5 · Answer 1

Maybe a solution is just the opposite, disable the icon and use a custom background, see:

(function() {
  document.querySelector(".fundo").onclick = function() {
    document.querySelector(".fundo").value = "";
  };
}());

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  display: none;
}

.fundo {
  background: url(http://www.nepneuro.com.br/site/img/fechar.svg) no-repeat scroll 98%;
  z-index: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><inputname="teste" type="search" class="fundo">

score 3 · Answer 2

In this case what you want is :: -webkit-search-cancel-button .

It is the pseudo CSS element that represents the "cancel button".

To style the same you can do something like this:

#Search {
  width: 480px;
  height: 49px;
  border: 3px solid black;
  padding-left: 48px;
  padding-top: 1px;
  font-size: 22px;
  color: blue;
  background-image: url('images/search.jpg');
  background-repeat: no-repeat;
  background-position: center;
  outline: 0;
}

#Search::-webkit-search-cancel-button {
  position: relative;
  right: 20px;
  -webkit-appearance: none;
  height: 20px;
  width: 20px;
  border-radius: 10px;
  background: red;
}

<input id="Search" name="Search" type="search" placeholder="Search" />

It's worth remembering that you may have compatibility issues with it, as presented by the Mozilla Developers (MDN) .

Formoredetails,youcanview this SOen response .

score 3 · Answer 3

Yes , such x (cancel button) if the mouse is not over the element and has no way to preserve it visible, I even got to find a article about customizing the cancel button, but if you read it carefully you will notice that it speaks of iOS, testing in Chrome / Opera will notice that it does not work and also note that it even says that this is not a good solution and that it is preferable to use some javascript that helps.

The only way would be to simulate this button using javascript tag, or some javascript framework

Cross-platform example

var fields = document.querySelectorAll(".field");

for (var i = 0, j = fields.length; i < j; i++) {
    cancelButtonEvents(fields[i]);
}

function updateVisibility(field, btn, timer) {
    timer && clearTimeout(timer);
    timer = setTimeout(function () {
        if (field.value != "") {
            btn.classList.add("visible");
        } else {
            btn.classList.remove("visible");
        }
    }, 10);
}

function cancelButtonEvents(field) {
    var realField = field.querySelector(".main-field");
    var btn = field.querySelector(".cancel");
    var timer;
    
    btn.onclick = function () {
        realField.value = "";
        updateVisibility(realField, btn, timer);
    };
    
    realField.onkeydown = function () {
         updateVisibility(realField, btn, timer);
    };
}

.field {
    display: inline-block;
    border: 1px solid #ccc;
}

.field input {
    border: none;
    background: transparent;
    vertical-align: middle;
}

.field a.cancel {
    visibility: hidden;
    text-decoration: none;
    padding: 5px;
}

.field a.visible {
    visibility: visible;
}

<div class="field">
    <input class="main-field" type="text" value="">
    <a class="cancel" href="javascript:void(0);">x</a>
</div>

Example with [type = search] real (Webkit / Blink only)

Based on the response from Marcelo I created an example that hides the x button with opacity e apply a background image to change simulate x , of course it depends a bit of JavaScript as I mentioned earlier:

Note that I used :not([disabled]):not([readonly]) to prevent elements with attribute disabled or readonly from displaying the "dummy button"

var searchFields = document.querySelectorAll("input[type=search]");

for (var i = 0, j = searchFields.length; i < j; i++) {
    cancelButtonEvents(searchFields[i]);
}

function updateVisibility(field, btn, timer) {
    timer && clearTimeout(timer);
    timer = setTimeout(function () {
        if (field.value != "") {
            field.classList.add("no-empty-search");
        } else {
            field.classList.remove("no-empty-search");
        }
    }, 10);
}

function cancelButtonEvents(field) {
    updateVisibility(field);
    
    field.onkeydown = function () {
        updateVisibility(field);
    };
    field.onchange = function () {
        updateVisibility(field);
    };
    field.oninput = function () {
        updateVisibility(field);
    };
}

::-webkit-search-cancel-button {
    opacity: 0;
    cursor: pointer;
}

.no-empty-search:not([disabled]):not([readonly]) {
    background: url(http://www.nepneuro.com.br/site/img/fechar.svg) no-repeat scroll 98%;
}

Vazio:
<input name="teste1" type="search" value="">
<br><br>

Pré-preenchido:
<input name="teste2" type="search" value="Olá mundo!">
<br><br>

Desabilitado:
<input name="teste3" type="search" value="desabilitado enquanto consulta via Ajax por exemplo" disabled>
<br><br>

Somente leitura:
<input name="teste4" type="search" value="leitura" readonly>