Xiper

Оформление input type=search

Автор: Евгений Рыжков Дата публикации:

Задача

Оформить с помощью CSS <input type="search">.

Проблема

Safari по умолчанию не позволяет задавать оформление этому полю. Chrome позволяет, но частично.

Рассмотрим простой пример:

input[type=search] {
	padding: 10px;
	border: 1px solid red;
	background: #CCFF00;
}

Смотрим результат. Safari вообще не отреагирует на данные стили. Chrome проигнорирует правило border.

Решение

В webkit браузерах вид этого поля по умолчанию соответствует стандартному для этого движка: ему задано правило -webkit-appearance: searchfield. Чтобы добиться нужного оформления, достаточно отменить эту установку:

input[type=search] {
	padding: 10px;
	border: 1px solid red;
	background: #CCFF00;
	-webkit-appearance: none;
}

Смотрим в живую. Поле изменит вид как нужно. При этом кнопочка-крестик для очистки поля останется (на момент подготовки материала, такая кнопка появляется при наборе текста только в Safari и Chrome).

Усложним задачу: требуется оформить нестандартно поле type=search с использованием фонового изображения. Под оформление должен попасть так же и крестик для очистки поля :).

input[type=search] {
	-webkit-appearance: none;
	width: 175px; /* указываем размеры полю */
	height: 29px;
	border: none; 
	background: url(img/send-job-form-inp.png); /* фоновая картинка для поля */
	padding-left: 10px; /* внутренние отступы для красоты */
	padding-right: 10px;
	box-sizing: border-box; /* чтобы размеры поля были во всех браузерах одинаковыми (по умолчанию вебкиты с крестиком для очистки иначе рассчитывают размер, чем остальные браузеры) */
	-moz-box-sizing: border-box; /* для FF, который не весь CSS3 осилил */
}
input[type="search"]:focus {
	outline: none; /* по хорошему тут нужно прописать альтернативный фон */
}
input[type="search"]::-webkit-search-cancel-button { /* псевдо что-то, что отвечает за кнопку очистки */
	-webkit-appearance: none; /* без сброса оформление не применится */
	width: 17px; /* размеры кастомного крестика */
	height: 16px;
	background: url(img/send-job-form-ulpoaded-close.png); /* новый вид крестика */
	margin-right: 2px; /* его даже можно позиционировать */
	cursor: pointer; /* вот это не работает */
}

Смотрим результат. Проверено в:

  • IE 8
  • Firefox 3-4
  • Opera 11.0
  • Chrome
  • Safari 5

Материалы

  • CSS Webkit Appearance