Как удалить весь стиль поиска по умолчанию для Webkit?

По умолчанию <input type="search" /> отображается как "собственное" поле поиска в Mac OS X (закругленные углы, кнопка очистки и т.д.). Я хочу полностью удалить этот пользовательский стиль, чтобы вход выглядел идентично эквивалентному текстовому вводу (<input type="text" />), но сохраняя тип ввода равным search.

Я пробовал -webkit-appearance: none;, который его очень близко... но там что-то смешное происходит с полями/дополнениями, которые я не могу переопределить, что заставляет ширину поля поиска отображать ~ 20px короче текстового ввода.

Есть ли другое свойство -webkit-, которое я не знаю, чтобы полностью отключить стиль?

Ответ 1

Попробуйте эти стили:

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 {
  -webkit-appearance:none;
}

Источник: http://css-tricks.com/webkit-html5-search-inputs/#comment-82432

Ответ 2

Для тех, кто все еще должен поддерживать IE, стоит упомянуть, что вам нужен совершенно другой набор стилей поставщиков, чтобы удалить "×" из Internet Explorer

В соответствии со статьей Удалите X из поиска типа входа Internet Explorer и Chrome:

/* clears the 'X' from Internet Explorer */
input.hide-clear[type=search]::-ms-clear,
input.hide-clear[type=search]::-ms-reveal {
  display: none;
  width: 0;
  height: 0; 
}

/* clears the 'X' from Chrome */
input.hide-clear[type="search"]::-webkit-search-decoration,
input.hide-clear[type="search"]::-webkit-search-cancel-button,
input.hide-clear[type="search"]::-webkit-search-results-button,
input.hide-clear[type="search"]::-webkit-search-results-decoration {
  display: none; 
}

Демонстрация в фрагментах стека и jsFiddle

label, input {display: block; margin-bottom: 1rem;}

/* clears the 'X' from Internet Explorer */
input.hide-clear[type=search]::-ms-clear,
input.hide-clear[type=search]::-ms-reveal {
  display: none;
  width: 0;
  height: 0; 
}

/* clears the 'X' from Chrome */
input.hide-clear[type="search"]::-webkit-search-decoration,
input.hide-clear[type="search"]::-webkit-search-cancel-button,
input.hide-clear[type="search"]::-webkit-search-results-button,
input.hide-clear[type="search"]::-webkit-search-results-decoration {
  display: none; 
}

<label >
  default
  <input type="search" value="query">  
</label>


<label >
  without x
  <input type="search" value="query" class="hide-clear" >  
</label>