thumb

Новые input типы HTML5 форм спасают меня от тонны работы по валидации форм, а также они помогают пользователям в заполнении форм (предоставляя больше возможностей в браузере, альтернативные раскладки клавиатуры и многое другое). Это работает великолепно, но к сожалению, браузеры Safari и Chrome используют по умолчанию свои собственные таблицы стилей для этих input полей, так-что мы не можем стилизовать (добавить CSS свойства) поисковую строку самостоятельно. Мне не нужны эти встроенные в веб-браузер стили для моей поисковой строки input потому, что Я хочу использовать свои собственные CSS свойства для поисковой строки, так-что после некоторого поиска, Я нашёл решение.

Чтобы удалить стиль по умолчанию и разрешить твои свойства CSS для работы тебе нужно изменить -webkit-appearance свойство. Добавь это правило в твою таблицу стилей:

input[type="search"] {
   -webkit-appearance: none;
}

Или, если у input поля есть имя класса, то ты можешь использовать его (для class="search"):

.search {
    -webkit-appearance: none;
}

Ещё ты можешь принудить Safari и Chrome обрабатывать твою поисковую строку как типичное текстовое поле input вот так:

input[type="search"] {
    -webkit-appearance: textfield;
}

Если эта статья помогла вам, пожалуйста, оставьте комментарий :smiley:

Спасибо за прочтение!