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;
}

Arthur Gareginyan

Arthur Gareginyan

Arthur is a designer and full stack software engineer. He is the founder of MyCyberUniverse.com. His personal website can be found at arthurgareginyan.com. Check out his free WordPress plugins at wordpress.org.

Follow Arthur: