How to Remove “X” icon from search input field or input type search
Many time you might have been noticed, a X icon (Cross icon) appears on the right side of the search field when you are typing something on the field. Generally it happens in Chrome browser and Internet Explorer.
That X is not part of Bootstrap framework or any other CSS framework. This is built-in with chrome and IE for input type = “Search”
The Solution to Remove this X icon:
The width/height on the Internet Explorer code is to ensure that no space is kept for the component. Otherwise, if you type text long enough, the content may be hidden under the hidden X.
That’s it. Copy/paste this code in your css file, all search box won’t have that annoying X anymore.
Maxime Rouiller
Unless someone like you cares a whole awful lot, nothing is going to get better.
Remove the X from Internet Explorer and Chrome input type search
When you have a some input with type="search" , typing some content will display an X to allow you to clear the content of the box.
That X is not part of Bootstrap or any other CSS framework. It’s built-in the browser. To be more precise, Chrome and IE10+.
The only way to remove it is to apply something like this:
The width/height on the Internet Explorer code is to ensure that no space is kept for the component. Otherwise, if you type text long enough, the content may be hidden under the hidden X .
That’s it. Copy/paste that in our main CSS file and all search box won’t have that annoying X anymore.
About Maxime Rouiller
I’m a Microsoft Cloud Developer Advocate, full time dad, part time coffee zombie. I care about developers and I’m actively working to help them achieve their goals.
Remove the Search Input Clear(x) Icon
I really appreciate the amount of different <input> elements we’ve received over the past decade. These elements don’t just bring a new semantic advantage, but also provide UI helpers, which in many cases are useful. In a recent case, I found a UI element not useful: the x (clear) icon in <input type=»search» /> elements.
In most cases that input is nice, but if you’re looking to really customize your search experience, you may want to get it out of the way:
With the snippet above, the cancelation icon disappears, as does the special highlight decoration!
Как убрать крестик на input в IE 9 и 10?
По-умолчанию Internet Explorer 9 и 10 при фокусе на input ( type=»text» , type=»email» , type=»url» , type=»number» , type=»tel» , type=»search» ) появляется крестик очистки содержимого поля.
Как убрать эту кнопку с input в IE 9 и 10?
Ответы (1 шт):
Убрать этот крестик в IE 10 можно так:
Для поля type=»password» значок можно убрать с помощью селектора ::-ms-reveal :
Вот только в Internet Explorer 9 эти значки будут портить всю верстку, так как IE 9 не поддерживает ::-ms-clear и ::-ms-reveal . Для решения этой проблемы можно абсолютно спозиционировать блок с белым фоном, которое «перекроет» лишние знаки в ваших input’ах.