Стилизация состояний форм (:focus, :valid, :invalid)

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

Опубликовано 17.03.2025
Просмотры 58
Автор
Рек. время прохождения 4 минуты
Упражнений 10
Комментарии 0
Тренажер CSS

В этом блоке упражнений вы попрактикуетесь в стилизации интерактивных состояний элементов форм с помощью CSS псевдоклассов. Вы научитесь изменять внешний вид полей ввода, когда они получают фокус (:focus), когда введенные данные корректны (:valid) и когда они некорректны (:invalid) согласно заданным правилам (например, тип email или атрибут required). Задания помогут вам сделать формы более интуитивно понятными и визуально привлекательными для пользователей, предоставляя им обратную связь в реальном времени. Вам нужно будет заполнить пропущенные части CSS кода, чтобы добиться нужного визуального эффекта.

Список тем

Подсветка поля при фокусе

id: 37468_focus-valid-invalid-1

Сделайте так, чтобы при получении фокуса (клике или переходе с помощью Tab) поле ввода "Имя" меняло свою рамку. Цвет и толщина рамки уже заданы, вам нужно указать только состояние, при котором эти стили должны применяться.

CSS
input[type="text"]input1 {
  border: 2px solid #007bff;
  outline: none; /* Убираем стандартную обводку браузера */
}

input[type="text"] {
  padding: 8px;
  border: 2px solid #ccc;
  border-radius: 4px;
  transition: border-color 0.3s ease;
}
HTML
<form>
  <label for="name">Имя:</label><br>
  <input type="text" id="name" name="name">
</form>
Чтобы применить стили к элементу, когда он находится в фокусе, используйте псевдокласс :focus после селектора элемента.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Изменение фона поля при фокусе

id: 37468_focus-valid-invalid-2

Дополните CSS код так, чтобы у поля ввода "Email" при получении фокуса изменялся цвет фона на светло-желтый (#ffffcc). Вам нужно указать и псевдокласс состояния, и CSS свойство для изменения фона.

CSS
input[type="email"]input1 {
  input2: #ffffcc;
  outline: none;
}

input[type="email"] {
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  transition: background-color 0.3s ease;
}
HTML
<form>
  <label for="email">Email:</label><br>
  <input type="email" id="email" name="email">
</form>
Используйте псевдокласс :focus для выбора элемента в фокусе. Для изменения цвета фона элемента применяется CSS свойство background-color.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Индикация валидного поля

id: 37468_focus-valid-invalid-3

Сделайте так, чтобы обязательное поле ввода "Email" получало зеленую рамку, когда в него введены корректные данные (соответствующие формату email). Вам нужно указать псевдокласс, отвечающий за состояние валидности.

CSS
input[type="email"]input1 {
  border-color: #28a745;
}

input[type="email"] {
  padding: 8px;
  border: 2px solid #ccc;
  border-radius: 4px;
  transition: border-color 0.3s ease;
  width: 90%;
}
HTML
<form>
  <label for="email-valid">Email (обязательно):</label><br>
  <input type="email" id="email-valid" name="email-valid" required>
</form>
Для стилизации элемента формы, содержимое которого успешно прошло проверку валидности (в данном случае, соответствует типу email и не пустое, так как есть required), используйте псевдокласс :valid.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Индикация невалидного поля

id: 37468_focus-valid-invalid-4

Дополните CSS так, чтобы обязательное поле "Телефон" (с типом tel) получало красную рамку, если оно не заполнено или его содержимое не соответствует ожидаемому формату (хотя для type="tel" строгой валидации формата нет, :invalid сработает, если поле пустое и имеет атрибут required). Укажите псевдокласс для невалидного состояния.

CSS
input[type="tel"]input1 {
  border-color: #dc3545;
}

input[type="tel"] {
  padding: 8px;
  border: 2px solid #ccc;
  border-radius: 4px;
  transition: border-color 0.3s ease;
  width: 90%;
}
HTML
<form>
  <label for="phone">Телефон (обязательно):</label><br>
  <input type="tel" id="phone" name="phone" required>
</form>
Используйте псевдокласс :invalid для применения стилей к элементу формы, содержимое которого не прошло проверку валидности (например, пустое поле с атрибутом required).
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Совмещение :focus и :invalid

id: 37468_focus-valid-invalid-5

Стилизуйте обязательное поле "Пароль". Оно должно получать синюю обводку (outline) при фокусе. Если же поле не заполнено и теряет фокус (или при отправке формы), оно должно получить красную рамку (border). Заполните пропуски для псевдоклассов :focus и :invalid.

CSS
input[type="password"]input1 {
  outline: 2px solid #007bff;
  border-color: #ced4da; /* Сброс цвета рамки при фокусе, если она была красной */
}

input[type="password"]input2 {
  border-color: #dc3545;
}

input[type="password"] {
  padding: 8px;
  border: 1px solid #ced4da;
  border-radius: 4px;
  transition: border-color 0.3s ease, outline 0.3s ease;
  width: 90%;
}
HTML
<form>
  <label for="password">Пароль (обязательно):</label><br>
  <input type="password" id="password" name="password" required>
</form>
Вам нужно два правила CSS. Первое использует псевдокласс :focus для стилизации обводки при фокусе. Второе использует псевдокласс :invalid для стилизации рамки при невалидном состоянии (пустое обязательное поле).
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Стилизация родителя при фокусе на поле ввода

id: 37468_focus-valid-invalid-6

Сделайте так, чтобы весь блок `div` с классом `input-group`, содержащий поле ввода, получал легкую тень, когда само поле ввода находится в фокусе. Используйте псевдокласс, который позволяет стилизовать родительский элемент на основе состояния дочернего.

CSS
.input-groupinput1 {
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}

.input-group {
  padding: 15px;
  border: 1px solid #eee;
  border-radius: 5px;
  margin-bottom: 10px;
  transition: box-shadow 0.3s ease;
}

.input-group label {
  display: block;
  margin-bottom: 5px;
}

.input-group input {
  width: calc(100% - 16px); /* Учитываем padding инпута */
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
HTML
<div class="input-group">
  <label for="username">Имя пользователя:</label>
  <input type="text" id="username" name="username">
</div>
<div class="input-group">
  <label for="user-email">Email пользователя:</label>
  <input type="email" id="user-email" name="user-email">
</div>
Псевдокласс :focus-within применяется к элементу, если он сам или любой из его дочерних элементов получает фокус. Примените его к селектору `.input-group`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Разная стилизация для невалидных полей

id: 37468_focus-valid-invalid-7

Задайте разные стили для невалидных полей. Обязательное поле Email должно получать красную рамку снизу. Обязательное поле Имя должно получать красную рамку слева. Используйте селекторы атрибутов в сочетании с псевдоклассом невалидности.

CSS
input[type="email"]input1 {
  border-bottom: 3px solid #dc3545;
  border-top: 1px solid #ccc; /* Сброс остальных */
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
}

input[type="text"]input2 {
  border-left: 3px solid #dc3545;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  border-right: 1px solid #ccc;
}

input {
  padding: 8px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  transition: border 0.3s ease;
  width: 90%;
  box-sizing: border-box;
}
HTML
<form>
  <label for="invalid-email">Email (обязательно):</label><br>
  <input type="email" id="invalid-email" name="invalid-email" required><br>

  <label for="invalid-name">Имя (обязательно):</label><br>
  <input type="text" id="invalid-name" name="invalid-name" required>
</form>
Используйте псевдокласс :invalid в сочетании с селектором атрибута type (например, input[type="email"]:invalid) для применения стилей к конкретным типам невалидных полей. Для рамки с одной стороны используйте свойства border-bottom или border-left.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Стилизация плейсхолдера при фокусе

id: 37468_focus-valid-invalid-8

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

CSS
input[type="search"]input1input2 {
  input3: 0.5;
}

input[type="search"] {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 20px;
  width: 90%;
}

input[type="search"]::placeholder {
  color: #aaa;
  transition: opacity 0.3s ease;
}
HTML
<form>
  <input type="search" placeholder="Введите запрос...">
</form>
Чтобы стилизовать плейсхолдер, используется псевдоэлемент ::placeholder. Чтобы применить стиль к плейсхолдеру только тогда, когда инпут в фокусе, скомбинируйте селектор инпута с :focus и псевдоэлемент ::placeholder (например, input:focus::placeholder). Для изменения прозрачности используйте свойство opacity.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Валидация по паттерну

id: 37468_focus-valid-invalid-9

Поле "Индекс" должно принимать только 6 цифр (это задано атрибутом pattern). Стилизуйте поле так, чтобы оно получало зеленую рамку при вводе 6 цифр (валидное состояние) и красную рамку в остальных случаях (невалидное состояние). Заполните пропуски для псевдоклассов :valid и :invalid.

CSS
input[pattern]input1 {
  border-color: #28a745;
}

input[pattern]input2 {
  border-color: #dc3545;
}

input[pattern] {
  padding: 8px;
  border: 2px solid #ccc;
  border-radius: 4px;
  transition: border-color 0.3s ease;
  width: 150px;
}
HTML
<form>
  <label for="zipcode">Индекс (6 цифр):</label><br>
  <input type="text" id="zipcode" name="zipcode" required 
         pattern="[0-9]{6}" title="Введите ровно 6 цифр">
</form>
Используйте псевдокласс :valid для стилизации поля, когда его содержимое соответствует атрибуту pattern. Используйте псевдокласс :invalid, когда содержимое не соответствует паттерну или поле пустое (так как оно required).
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Комплексная обратная связь для поля ввода

id: 37468_focus-valid-invalid-10

Создайте форму с полем для ввода URL. При фокусе поле должно получать синюю обводку. Если введен валидный URL (проверяется типом `type="url"` и атрибутом `required`), поле должно получить зеленую рамку. Если URL невалиден или поле пустое, рамка должна стать красной. Заполните пропуски для псевдоклассов :focus, :valid и :invalid.

CSS
input[type="url"]input1 {
  outline: 2px solid #007bff;
  /* Убираем влияние border-color от :valid/:invalid при фокусе */
  border-color: #ccc; 
}

input[type="url"]input2 {
  border-color: #28a745;
  outline: none; /* Убираем outline при валидности без фокуса */
}

input[type="url"]input3 {
  border-color: #dc3545;
  outline: none; /* Убираем outline при невалидности без фокуса */
}

input[type="url"] {
  padding: 8px;
  border: 2px solid #ccc;
  border-radius: 4px;
  transition: border-color 0.3s ease, outline 0.3s ease;
  width: 90%;
  box-sizing: border-box;
}
HTML
<form>
  <label for="website">Веб-сайт (URL, обязательно):</label><br>
  <input type="url" id="website" name="website" required placeholder="https://example.com">
</form>
Вам понадобятся три CSS правила: одно с псевдоклассом :focus для стилизации обводки (outline), второе с :valid для зеленой рамки (border-color), и третье с :invalid для красной рамки (border-color).
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку
Предыдущая темаСледующая тема
НайтиКурс.Ру