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.
Скрыть крестик в input в crome , ie
На полях ввода, которые типа «поиск» в HTML5 браузерах добавляются некоторые маленькие синие «X» в правом верхнем углу, что на самом деле является кнопкой. Эта кнопка очистит ввод поиска пользователя , если пользователь нажимает на «X», или если он нажимает клавишу ESC на клавиатуре. Это , конечно, полезная функция, но для некоторых стилизованных форм поиска она просто не подходит и может выглядеть весьма некрасиво. Всё еще ищите чтобы отключить крестик в хроме?
Вот как это выглядит. 
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.
How to remove “X” from search input field on Chrome and IE
On input fields that are type “search” on HTML5 browsers add some a little blue “X” at top right side that is actually a clear button. It would clear user search input if user clicks on that “X” or if he presses ESC on keyboard. It’s a useful feature, to be sure, but for some stylish search forms it just doesn’t fit and can look quite ugly. While working on one project this became a problem and I was a looking for a way to disable it?
Here’s how it looks like on average field: 
Well doesn’t look bad but if you style that box a bit it can look quite ugly…
The first solution was to simply replace type=”search” with type=”text” but that would be just too easy. And why the hell they added search type if I can’t use it! So I was looking for some other solutions. Clearly different browsers have different approaches.
To remove “X” from all search input fields in IE, simply add this to bottom of your css:
To remove “X” from search input field on Chrome Browser (and all it’s mutations), simply add this to bottom of your css:
The following CSS code should remove that clear button on all search fields on page:
I have tested this in following browsers IE, Firefox, Chrome and Opera.
Added on May 26th 2014:
I have discovered another Chrome bug/issue that is really annoying in case you have a custom design and you don’t want Chrome to mess with it at all. It happens on all auto-complete forms where Chrome adds yellow background color to the autocomplete fields. Sample picture from WordPress loign page (but it happens on other fields too):
The solution is easy and all you need to do is to add this code into your CSS and change the color (if needed):
Useful links that can help you solve this problem:
If you have any questions or comments feel free to comment using the comment box below.