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

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

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

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

Список тем

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

Сделайте так, чтобы при получении фокуса (клике или переходе с помощью 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 после селектора элемента.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

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

Дополните 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.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

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

Сделайте так, чтобы обязательное поле ввода "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.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

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

Дополните 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

Стилизуйте обязательное поле "Пароль". Оно должно получать синюю обводку (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 для стилизации рамки при невалидном состоянии (пустое обязательное поле).
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

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

Сделайте так, чтобы весь блок `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`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

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

Задайте разные стили для невалидных полей. Обязательное поле 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.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

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

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

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.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

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

Поле "Индекс" должно принимать только 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).
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

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

Создайте форму с полем для ввода 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).
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку
Предыдущая темаСледующая тема
НайтиКурс.Ру