Стилі за замовчуванням для 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;
}

Якщо ця стаття допомогла вам, будь ласка, залиште коментар

Дякую за прочитання!