Оформление полей ввода в Safari: от круглых к прямоугольным

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

Для устранения скругления форм ввода в Safari на iPhone примените CSS-правило -webkit-appearance: none; и дополните его свойством border-radius: 0;, чтобы получить строгие прямоугольные контуры.

input {
  -webkit-appearance: none; /* Открываем дорогу прямоугольным интерфейсам! */
  border-radius: 0; /* Углы под надежным наблюдением */
}

Основы CSS

Давайте посмотрим, как работают эти CSS-решения:

Работа с разными типами полей ввода

В iOS различные типы полей ввода отличаются своеобразной стилизацией. Чтобы нормализовать их, используйте:

input[type="search"] {
  -webkit-appearance: none; /* Магическое удаление наследуемого стиля */
  border-radius: 0; /* Появляются идеально квадратные формы */
}

Подробнее об этом расскажет наш спикер на видео

Старые методы для старых версий

В прошлых версиях iOS основным решением было использование -webkit-border-radius. Сейчас рекомендуется border-radius, что соответствует современным стандартам и гарантирует стабильность стилей.

Тестирование в разных браузерах

Необходимо проводить межбраузерные тесты для подтверждения корректности отображения ваших полей ввода. Знакомая истина: "Проверяй, но не доверяй".

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

Представим, что форма ввода на iPhone – это воздушный шар. CSS-правила помогут его спустить:

📱 Форма до работы CSS: [🎈]

После применения CSS шар превращается в плоский прямоугольник:

input { border-radius: 0; } /* Шарик лопнул! */

И конечный результат – идеальный прямоугольник:

📱 Форма после: [▭]

Именно то, что нам нужно.

Финальный штрих: стилизация полей ввода

Поля ввода должны гармонично вписываться в общий стиль сайта:

Следите за стилями

Форма ввода, не согласующаяся с общим стилем, может исказить восприятие сайта пользователями. Убедитесь, что они органично интегрированы в стиль сайта, примером может служить LinkedIn.

Свойства с префиксами: бережное использование

Apple всегда может прекратить поддержку свойств с префиксом -webkit-. Будьте готовы к изменениям и не полностью полагайтесь на них.

Очистка кода

Чистота кода — это основа успешного проекта. Вот несколько советов:

• Используйте конкретные селекторы: точность так же важна, как адекватная стилизация каждой формы ввода.
• Регулярно проверяйте изменения: не ограничивайтесь только проверкой в Safari.
• Бережно модифицируйте стили элементов <select>: они чрезвычайно чувствительны к любым изменениям.

Из двух минусов можно получить плюс

Сочетание -webkit-appearance: none и border-radius: 0 усиливает их эффективность:

input {
  -webkit-appearance: none; /* Попрощаемся со стандартами скругления iOS */
  border-radius: 0;         /* Мы на пути к квадратной форме! */
}

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

1. Стилизация веб-форм — Учебник по веб-разработке от MDN — Руководство по стилизации форм с акцентом на совместимость и стандарты.
2. Can I use...? Support tables for HTML5, CSS3, etc. — Информация о поддержке браузерами свойства CSS appearance.
3. CSS Basic User Interface Module Level 4 — Рабочий документ W3C, объясняющий, как можно использовать свойство appearance.
4. Настройка размера Textarea с помощью CSS — Статья о том, как управлять возможностью масштабирования текстового поля.
5. Изменение содержимого страницы jquery/js/html5, когда на мобильных устройствах появляется клавиатура — Обсуждение на Stack Overflow о трудностях с отображением форм на мобильных устройствах.