Стили по-умолчанию для HTML5 input поля поиска в Safari и Chrome
Новые 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;
}
Если эта статья помогла вам, пожалуйста, оставьте комментарий
Спасибо за прочтение!
Arthur is a designer and full stack software engineer. He is the founder of Space X-Chimp and the blog My Cyber Universe. His personal website can be found at arthurgareginyan.com.