How to style the input type search "clean" icon?

Question

I need a way to stylize the icon at the end of input[type="search"].

The input type search when focusing on the element, it displays one if it has a value filled.

Example:

I realized that by styling the input search, many times this "Xizinho" disappears.

How can I make to style it and still preserve it on input[type="search"]?

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>
<input name="teste" type="search" class="fundo">

Answer 2

In this case what you want is the ::-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 is worth remembering that you may have problems of compatibility with it, as presented by Mozilla developers (MDN).

If you want more details, you can see this reply from Soen.

Answer 3

Yes, the one x (cancel button) some if the mouse is not above the element and has no way to preserve it visible, I even found 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 you will notice that it does not work and also note that he himself 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, or some javascript framework

Example cross-Platform

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>

Real [type=search] example (Webkit/Blink only)

Based on the answer from Marcelo created an example that hides the button x with opacity and apply a background image to simulate the x, of course it depends a little on Javascript as I mentioned earlier:

note that I used the :not([disabled]):not([readonly]) to prevent elements with attribute/property disabled or readonly display the "simulated 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>