Простий приклад
Тут ми маємо три текстових поля, які використовують місцезаповнювачі.
Як ви можете бачити - нічого складного. Коли ви фокусуєтесь на якомусь з полів, то з'являється назва цього поля, певного роду нагадування користувачу, що саме він повинен вводити:
<div class="form-row">
<input class="input-text" id="name2" placeholder="Your Email" type="email">
<label class="label-helper" for="name2">Your Email</label>
</div>
Нічого незвичайного у даному HTML фрагменті. Єдине, що виходить за рамки стандарту - тег label, який знаходиться після тегу input.
Тепер за допомогою СSS потрібно привести це в дію:
.form-row {
position: relative;
}
.input-text {
background-color: #fff;
border: 1px solid #ccc;
margin-bottom: 8px;
padding: 8px 4px;
position: relative;
width: 100%;
z-index: 3;
}
.label-helper {
bottom: 0;
left: 0;
opacity: 0;
position: absolute;
transition: .2s bottom, .2s opacity;
z-index: 1;
}
Це перша частина СSS запроваджує стилі елементів форми за умовчуванням. Клас .form-row підтримує абсолютне позиціонування, а .label-helper знаходиться поряд з відповідним полем вводу.
Елемент .input-text має position:relative, також потрібно вказали z-index, щоб наш label після не накладався на поле для вводу.
Тепер СSS, який обрабляє наші назви(.label-helper), так щоб вони показувались, при фокусуванні:
.input-text:focus + .label-helper,
.input-text:invalid + .label-helper {
bottom: 95%; /* magic number, boo */
font-family: arial;
font-size: 14px;
line-height: 1;
opacity: 1;
padding: 4px;
}
.input-text:invalid {
border-left: 10px solid #f00;
}
.input-text:invalid + .label-helper:after {
color: #f00;
content: "X";
font-family: arial;
font-size: 14px;
line-height: 1;
padding-left: 12px;
}
Дуже важливий елемент, який використовується це :focus та поряд "братський" селектор + (взагалі такі селектори це дуже важлива частина усього данного фрагменту).
Ми маємо використовувати .label-helper після нашого .input-text оскільки наш селектор не працює навпаки.
По суті, коли фокус знаходиться на полі для вводу, то наш label стає повністю непрозорим та перебуває над полем вводу.
Ще немає коментарів