Como remover o icone “X” da barra de busca no campo input field ou input type search

/* Funciona para Chrome e IE */

Muitas vezes você pode ter percebido que um ícone X (ícone de cruz) aparece no lado direito do campo de pesquisa quando você está digitando algo no campo. Geralmente isso acontece no navegador Chrome e no Internet Explorer.


/* clears the ‘X’ from Internet Explorer */
input[type=search]::-ms-clear { display: none; width : 0; height: 0; }
input[type=search]::-ms-reveal { display: none; width : 0; height: 0; }
/* clears the ‘X’ from Chrome */
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; }

Esse X não faz parte do framework Bootstrap ou de qualquer outro framework CSS. Ele é integrado ao Chrome e ao IE para o tipo de entrada = “Pesquisa”.

A Solução para Remover esse Ícone X:

A largura/altura no código do Internet Explorer é para garantir que nenhum espaço seja mantido para o componente. Caso contrário, se você digitar texto por tempo suficiente, o conteúdo pode ficar oculto sob o X oculto.

É isso. Copie/cole este código em seu arquivo CSS, e todos os campos de pesquisa não terão mais esse X irritante.