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

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

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

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

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

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

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

<label class="custom-field"> <input type="email"/> <span class="placeholder">Enter Email</span>
</label>

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

<div class="custom-field"> <input id="email-field" type="email"/> <label for="email-field" class="placeholder">Enter Email</label>
</div>

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

<label class="custom-field" aria-label="Enter Email"> <input type="email"/>
</label>

// create the placeholder element
.custom-field::after { content: attr(aria-label);
}

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

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

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

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

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

*, *::before, *::after { box-sizing: border-box;
}

Базовый стиль

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

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

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

.custom-field { font-size: 14px; position: relative;
}

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

.custom-field input { border: none; -webkit-appearance: none; -ms-appearance: none; -moz-appearance: none; appearance: none; background: #f2f2f2; padding: 12px; border-radius: 3px; width: 250px; font-size: 14px;
}

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

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

.custom-field .placeholder { position: absolute; left: 12px; bottom: 50%; top: 22px; transform: translateY(-50%); width: calc(100% - 24px); color: #aaa; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}

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

.custom-field { ... --field-padding: 12px;
}
.custom-field input { ... padding: var(--field-padding);
}
.custom-field .placeholder { ... left: var(--field-padding); width: calc(100% - (var(--field-padding) * 2));
}

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

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

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

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

.custom-field { ... border-top: 20px solid transparent;
}

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

.custom-field input:focus + .placeholder { top: -10px; font-size: 10px; color: #222;
}

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

<input type="email" required/>

// if required field is valid means it has value
// if more validation rules is specified this may break
input:valid + .placeholder { ...
}

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

// the placeholder must NOT be empty
// for this to work and &nbsp; is simply
// a empty space
<input type="email" placeholder="&nbsp;"/>

// if the placeholder is not shown
// it means the user started to type value
input:not(:placeholder-shown) + .placeholder { ...
}

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

.custom-field .placeholder { ... transition: top 0.3s ease, color 0.3s ease, font-size 0.3s ease;
}
.custom-field input:not(:placeholder-shown) + .placeholder
.custom-field input:focus + .placeholder { top: -10px; font-size: 10px; color: #222;
}

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

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

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

<label class="custom-field"> <input type="email" placeholder="&nbsp;"/> <span class="placeholder">Enter Email</span> <span class="error-message" aria-live="polite"></span>
</label>

.custom-field { ... margin-bottom: 24px;
}
.custom-field .error-message { width: 100%; display: flex; align-items: center; padding: 0 8px; font-size: 12px; background: #d30909; color: #fff; height: 24px;
}
.custom-field .error-message:empty { opacity: 0;
}

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

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

Что дальше?

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

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

Автор: Before Semicolon

Источник: medium.com

Редакция: Команда webformyself.

Читайте нас в Telegram, VK, Яндекс.Дзен