Оформление input type=search
Дата публикации: 06.04.2011
Задача
Оформить с помощью 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