Come rimuovere l’icona “X” dal campo di ricerca di tipo di input

Spesso potresti aver notato che compare un’icona a forma di croce (X) sul lato destro del campo di ricerca mentre stai digitando qualcosa al suo interno. Questo fenomeno si verifica principalmente sui browser Chrome e Internet Explorer.

Nel codice per Internet Explorer, la larghezza e l’altezza sono impostate in modo tale da evitare che lo spazio per il componente venga riservato. Altrimenti, digitando abbastanza testo, potrebbe verificarsi il nascondimento del contenuto sotto la X invisibile.

Ecco il codice da copiare/incollare nel tuo file CSS: una volta applicato, le caselle di ricerca non mostreranno più l’icona X fastidiosa.

css">/* nt-cancella la 'X' da Internet Explorer */
input[type=search]::-ms-clear { display: none; width: 0; height: 0; } 
input[type=search]::-ms-reveal { display: none; Width: 0; height: 0; }

/* nt-cancella la 'X' da Chrome */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search -pulsante-risultati,
input[type="search"]::-webkit-search-results-decoration { display: none; }