Устраняем внутреннюю тень ввода текста в HTML5: решение

Быстрый ответ

Для удаления внутренней тени из текстовых полей примените к CSS-свойству appearance значение none, таким образом отключая стандартные стили браузера. Для Safari потребуется дополнительное настройка — удаление украшательств полей поиска с использованием псевдоэлементов ::-webkit-search-decoration и других. Воспользуйтесь следующим кодом:

input[type="search"] {
    -webkit-appearance: none; /* Chrome, Safari, Opera */
    -moz-appearance: none; /* Firefox */
    appearance: none; /* А также для многих других браузеров */
}

/* Safari спрятал, но мы нашли! */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button {
    display: none;
}

Регулировка единообразия в различных браузерах

Совпадение вида текстовых полей в разныx браузерах может быть непростой задачей. Однако не волнуйтесь, переопределение стандартных стилей — это наша специализация. Для борьбы с внутренними тенями, примените следующий подход:

input {
    border-style: solid; /* Надёжный подход, если 'inset' не приносит радости */
    border: 1px solid #cccccc; /* Оживите границы, выберите цвет */
}

Прощай, границы!

Удаление границ поможет достичь чистого, минималистического дизайна. Для этого в CSS достаточно предусмотреть:

input {
    border: none; /* Или используйте 'border: 0;', если так удобнее */
}

Фокус на состоянии фокуса

Внимательно следите за состоянием :focus при изменении стиля текстового поля, чтобы избежать нежелательных границ или теней. Спокойствие этого элемента все равно важно:

input:focus {
    outline: none;
    box-shadow: none; /* Кто говорит, что тени обязательны в интерфейсе? */
}

Взаимодействие с мобильным Safari

Мобильный Safari способен добавлять собственные визуальные "изюминки", что сравнимо с поиском носка после стирки. Это особенно относится к формам, и здесь помогут префиксы, специфичные для производителя:

input {
    -webkit-border-radius: 0; /* Яблоки должны быть круглыми, поля ввода — необязательно */
}

Визуализация

Представьте текстовое поле ввода, будто оно было создано в кондитерской — прозрачное и чистое (🥛). Внутренняя тень выглядит как неумело приклеенная ярлычок цены (🏷️), портящий визуальное ощущение.

🥛 + 🏷️ = Текстовое поле с внутренней тенью

Теперь внесем наши CSS-изменения:

input {
    box-shadow: none; // Здесь не место таким теням!
    -webkit-appearance: none; // Стираем заводские установки!
}

И вот он, перед нами — идеально чистое и прозрачное текстовое поле без тени:

🥛 = Текстовое поле без внутренней тени

Визуальное совершенство достигнуто, сплошная прозрачность! 🌟

Борьба со стандартными состояниями: Раунд 2

Текстовые поля иногда могут быть упрямыми, возвращаясь к своим исходным стилям при взаимодействии с пользователем. Чтобы они подчинялись вашим требованиям, используйте appearance: none;:

input:focus {
    -webkit-appearance: none; /* Chrome, Safari, Opera */
    -moz-appearance: none; /* Firefox */
    appearance: none; /* Эффективно везде */
}

Доступность на первом месте!

Удаление границ и теней может выглядеть стильно, но во имя доступности важно сохранять визуальные указания для элементов в состоянии фокуса. Вот добротный компромисс:

input:focus {
    outline: 1px solid #333; /* Тонкая черта между красотой и удобством */
}

Полезные материалы

1. outline – CSS: Cascading Style Sheets | MDN — подробное описание свойства outline на MDN.
2. outline | CSS-Tricks — всё об свойстве outline, ваш гид от CSS-Tricks.
3. box-shadow – CSS: Cascading Style Sheets | MDN — глубокий разбор свойства box-shadow на MDN.
4. Can I use... Support tables for HTML5, CSS3, etc — ресурс для проверки поддержки HTML и CSS свойств в различных браузерах.