18.10.2021

Как стилизовать любое поле ввода — советы и методы

Как стилизовать хоть какое поле ввода — советы и способы

От создателя: поле ввода в HTML обычное, мощное и выполняет то, для чего предназначено. Имея более 30 вариантов атрибутов, input является одним из самых надежных HTML-тегов.

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

Как стилизовать хоть какое поле ввода — советы и способы

Базовая разметка

Не плохое практическое правило и на самом деле наилучшая практика CSS — всегда добавлять метки. В этой статье я буду использовать поле, вложенное снутри label, которое неявно связывает label и тег input вкупе и устраняет необходимость указывать атрибут «for» для label и «id» для input, не говоря уже о том, что это также позволяет очень просто стилизовать поле.

Другой кандидатурой было бы использование тега div в качестве оболочки для таких вещей, как размещение, чтобы у них был общий родительский элемент. Тег fieldset также может иметь смысл в неких случаях. Этот метод упаковки позволяет располагать label и input рядом, и рассматривать их как единое целое.

Еще более маленькая и все еще действующая альтернатива — использовать тег label с input снутри, но с атрибутом aria-label для программ чтения с экрана, а потом использовать псевдоэлемент CSS after для сотворения элемента placeholder.

CSS

Все эти три кандидатуры будут работать со стилем, который мы будем делать до конца этой статьи. Ниже вы сможете видеть, что все три параметра показывают на странице одно и то же. Я использую браузер Chrome, чтоб посмотреть на результат.

Как стилизовать хоть какое поле ввода — советы и способы

Если вы спросите, для чего ставить label после input — это поэтому, что мы можем использовать состояния ввода, такие как “фокус” и другие, для нацеливания на label и управления ее наружным видом и анимацией. Альтернативой может быть внедрение javascript, что выходит за рамки этого управления.

Начальная настройка

Обычно я использую нормализаторы CSS, но в случае, если вы этого не сделаете, вы сможете включить border-box и box-sizing для установки четкого размера и отступа. Если ваше поле не смотрится так, как в этой статье, возможно, потому, что вам нужен этот кусок кода:

CSS

Базисный стиль

Для этого поля я выберу очень обычной и минималистичный вид, который мы можем сделать лучше по мере написания кода.

Как стилизовать хоть какое поле ввода — советы и способы

Для этого поля, текст будет иметь размер 14 пикселей, и так как я хочу разместить элемент “placeholder” поверх input, мне необходимо установить относительное положение.

CSS

Стиль поля input в основном предназначен для его сброса, к примеру удаления внешнего вида и границы. Обратите внимание, что ширина input определяет размер элемента custom-field, и еще одна принципиальная деталь — это отступы, которые нам необходимо будет сопоставить при размещении элемента placeholder.

CSS

Сейчас для нашего placeholder я позиционирую его в абсолютном левом углу, чтоб он соответствовал отступу 12 пикселей, и использую преобразование для выравнивания по вертикали с -50% и верхним пределом 22 пикселей, которые вам необходимо провести, чтобы сделать его идеально центрированным. Верхние 50% также работают, но я использую пиксели тут для сообщения об ошибке, которое мы проверим позднее.

Чтобы позаботиться о потенциально длинноватом тексте в placeholder, чего, кстати, никогда не должно быть, я ограничиваю его ширину до 100% минус 24 пикселя, где 24 — это итог суммы левого и правого отступов. Потом я установил переполнение как ellipsis.

CSS

Вы сможете использовать здесь переменную CSS, чтобы убедиться, что если вы позднее измените отступы, placeholder также будет изменён.

CSS

Эффект плавающего поля label

Сейчас, когда мы нажимаем на поле, placeholder сжимается и перемещается в верхний левый угол над полем.

Как стилизовать хоть какое поле ввода — советы и способы

Для этого нам поначалу нужно иметь некоторое пространство над полем для перемещения placeholder -a и для малого пространства, необходимого, если перед ним возникает другой элемент. Для этого 20 пикселей по верхнему краю совершенно подходят, чтобы label оставалась центрированной по отношению к блоку, а граница числилась внешней частью.

CSS

Сейчас нам нужно знать, когда input получает фокус для анимации placeholder-а. Потому, когда поле получает фокус, мы будем использовать комбинатор для нацеливания на placeholder и конфигурации шрифта на меньший размер, темный цвет и сдвиг ввысь на 10 пикселей.

CSS

Сейчас проблема в том, что если поле имеет значение и не имеет фокуса, мы также желаем, чтобы placeholder оставался активным. Для этого есть много альтернатив. Мы могли бы использовать псевдокласс :valid вкупе с атрибутом required, но проблема в том, что он работает только для неотклонимых полей.

CSS

Другой кандидатурой является использование javascript для установки класса, когда поле имеет значение либо нет, но это руководство предназначено только для CSS, потому решение – это использовать “placeholder-shown” вместе с непустым атрибутом placeholder-а.

CSS

Сейчас, чтобы воспользоватся возможностью иметь красивую анимацию, мы можем добавить переход к верхнему краю, размер шрифта и цвет к элементу placeholder-а.

CSS

Отображение сообщение об ошибке

В зависимости от формы вам может потребоваться, а может и не потребоваться демонстрировать сообщение об ошибке прямо в поле. Для тега label вы сможете включить другой элемент ошибки.

Как стилизовать хоть какое поле ввода — советы и способы

CSS

Большой трюк тут в том, что поле ошибки занимает всю ширину и, естественно, находится под полем. Вы также сможете проверить, есть ли ошибка, и показать элемент сообщения об ошибке. В общем, я предпочитаю использовать непрозрачность, чтоб не было разницы между отображением ошибки либо ее отсутствием, но вы можете делать все, что возжелаете.

Атрибут aria-live указывает, что об этом следует сказать всем, включая программы чтения с экрана. Соответствуюшее значение показывает, как следует сообщить об ошибке юзеру. В этом сценарии такой атрибут строго нужен, чтобы помочь путаницей с текстом в теге label.

Что далее?

Эти методы организации разметки, чтоб поле выглядело красиво, без ущерба для доступности и SEO, имеют огромное значение и могут использоваться в качестве базы для многих удивительных полей.

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

По материалам webformyself.com

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *