Close

27 июня, 2021

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

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

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

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

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

1234 <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>

1234 <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>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

CSS
.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;
}

123456789101112 .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.

CSS
.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;
}

123456789101112 .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 также будет изменён.

CSS
.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));
}

12345678910111213 .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));}

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

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

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

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

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

CSS
.custom-field {

border-top: 20px solid transparent;
}

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

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

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

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

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

<input type=»email» required/>

1 <input type=»email» required/>

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

}

12345 // if required field is valid means it has value// if more validation rules is specified this may breakinput: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;»/>

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

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

}

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

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

CSS
.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;
}

12345678910111213 .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>

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

CSS
.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;
}

1234567891011121314151617 .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

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

Похожие статьи

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

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

Яндекс.Метрика
Открыть чат
Если есть вопросы пишите нам
Здравствуйте.
Чем вам помочь?