Базовая стилизация input и button: Тренажер CSS

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

Эта серия упражнений посвящена основам стилизации стандартных элементов форм HTML: полей ввода (`<input>`) и кнопок (`<button>`). Вы попрактикуетесь в изменении их внешнего вида с помощью CSS, научитесь применять стили к разным состояниям элементов (например, при наведении курсора или получении фокуса), а также использовать селекторы для выбора конкретных типов полей ввода. Задания построены по принципу "от простого к сложному" и помогут закрепить знания базовых свойств CSS, применяемых к элементам форм.

Список тем

Добавление рамки для поля ввода

Задача: Добавить сплошную черную рамку толщиной 1px к полю ввода `input`. Необходимо указать свойство для установки рамки.

CSS

input {
  /* Добавьте рамку */
  input1: 1px solid black;
  padding: 5px;
}

                     input {
  /* Добавьте рамку */
  input1: 1px solid black;
  padding: 5px;
}

HTML

<form>
  <label for="username">Имя:</label>
  <input type="text" id="username" name="username">
</form>

Для добавления рамки используется свойство `border`. Оно позволяет задать толщину, стиль (например, `solid` для сплошной) и цвет рамки одновременно.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Внутренний отступ для поля ввода

Задача: Сделать поле ввода более удобным для чтения, добавив внутренние отступы со всех сторон размером 8px. Укажите правильное CSS свойство для этого.

CSS

input {
  border: 1px solid #ccc;
  /* Добавьте внутренние отступы */
  input1: 8px;
}

                     input {
  border: 1px solid #ccc;
  /* Добавьте внутренние отступы */
  input1: 8px;
}

HTML

<form>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email">
</form>

Для управления внутренними отступами элемента используется свойство `padding`. Оно создает пространство между содержимым элемента и его границей.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Изменение фона кнопки

Задача: Изменить цвет фона кнопки на синий (`#007bff`). Укажите свойство, отвечающее за цвет фона элемента.

CSS

button {
  /* Установите цвет фона */
  input1: #007bff;
  color: white;
  padding: 10px 15px;
  border: none;
}

                     button {
  /* Установите цвет фона */
  input1: #007bff;
  color: white;
  padding: 10px 15px;
  border: none;
}

HTML

<button>Нажми меня</button>

Для изменения цвета фона элемента используется свойство `background-color` или его сокращенная версия `background`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Изменение цвета текста кнопки

Задача: Сделать текст на кнопке белым (`#ffffff`), чтобы он был хорошо виден на темном фоне. Укажите CSS свойство для изменения цвета текста.

CSS

button {
  background-color: #333;
  /* Установите цвет текста */
  input1: #ffffff;
  padding: 10px 15px;
  border: none;
}

                     button {
  background-color: #333;
  /* Установите цвет текста */
  input1: #ffffff;
  padding: 10px 15px;
  border: none;
}

HTML

<button>Отправить</button>

Свойство `color` используется для задания цвета текста внутри элемента.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

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

Задача: Изменить цвет рамки поля ввода на синий (`#007bff`), когда пользователь кликает на него или переходит с помощью клавиатуры (т.е. когда поле получает фокус). Допишите селектор для состояния фокуса и свойство для цвета рамки.

CSS

input {
  border: 1px solid #ccc;
  padding: 8px;
  transition: border-color 0.3s ease;
}

/* Стиль для поля в фокусе */
inputinput1 {
  input2: #007bff;
  outline: none; /* Убираем стандартную обводку браузера */
}

                     input {
  border: 1px solid #ccc;
  padding: 8px;
  transition: border-color 0.3s ease;
}

/* Стиль для поля в фокусе */
inputinput1 {
  input2: #007bff;
  outline: none; /* Убираем стандартную обводку браузера */
}

HTML

<form>
  <label for="search">Поиск:</label>
  <input type="search" id="search" name="search">
</form>

Для стилизации элемента в состоянии фокуса используется псевдокласс `:focus`. Чтобы изменить только цвет рамки, используйте свойство `border-color`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

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

Задача: Сделать кнопку интерактивнее, изменяя её фон на более темный оттенок синего (`#0056b3`), когда пользователь наводит на неё курсор мыши. Допишите псевдокласс для состояния наведения.

CSS

button {
  background-color: #007bff;
  color: white;
  padding: 10px 15px;
  border: none;
  transition: background-color 0.3s ease;
}

/* Стиль для кнопки при наведении */
buttoninput1 {
  background-color: #0056b3;
}

                     button {
  background-color: #007bff;
  color: white;
  padding: 10px 15px;
  border: none;
  transition: background-color 0.3s ease;
}

/* Стиль для кнопки при наведении */
buttoninput1 {
  background-color: #0056b3;
}

HTML

<button>Подтвердить</button>

Для применения стилей при наведении курсора мыши используется псевдокласс `:hover`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

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

Задача: Изменить вид курсора при наведении на кнопку, чтобы он выглядел как рука (указатель), что является стандартом для кликабельных элементов. Укажите свойство и значение для изменения курсора.

CSS

button {
  background-color: #28a745;
  color: white;
  padding: 10px 15px;
  border: none;
  /* Измените вид курсора */
  input1: input2;
}

                     button {
  background-color: #28a745;
  color: white;
  padding: 10px 15px;
  border: none;
  /* Измените вид курсора */
  input1: input2;
}

HTML

<button>Сохранить</button>

Свойство `cursor` управляет видом курсора мыши при наведении на элемент. Значение `pointer` задает вид курсора в виде руки (указателя).

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Скругление углов кнопки

Задача: Сделать кнопку менее строгой, скруглив её углы. Установите радиус скругления углов в 5px. Укажите свойство для скругления углов.

CSS

button {
  background-color: #dc3545;
  color: white;
  padding: 10px 15px;
  border: none;
  /* Добавьте скругление углов */
  input1: 5px;
}

                     button {
  background-color: #dc3545;
  color: white;
  padding: 10px 15px;
  border: none;
  /* Добавьте скругление углов */
  input1: 5px;
}

HTML

<button>Удалить</button>

Свойство `border-radius` позволяет скруглять углы элемента. Значение задает радиус скругления.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Стилизация только текстовых полей ввода

Задача: Применить стиль (добавить нижнюю рамку толщиной 2px синего цвета `#007bff`) только к полям ввода типа `text`, игнорируя другие типы полей (например, `email` или `password`). Допишите селектор атрибута для выбора по типу.

CSS

/* Стиль только для текстовых полей */
inputinput1 {
  border: none;
  border-bottom: 2px solid #007bff;
  padding: 5px 0;
}

/* Общие стили для всех input для наглядности */
input {
  margin-bottom: 10px;
  display: block; /* Чтобы поля были друг под другом */
  width: 90%;
}

label {
  display: block;
  margin-bottom: 3px;
  font-size: 14px;
}

                     /* Стиль только для текстовых полей */
inputinput1 {
  border: none;
  border-bottom: 2px solid #007bff;
  padding: 5px 0;
}

/* Общие стили для всех input для наглядности */
input {
  margin-bottom: 10px;
  display: block; /* Чтобы поля были друг под другом */
  width: 90%;
}

label {
  display: block;
  margin-bottom: 3px;
  font-size: 14px;
}

HTML

<form>
  <label for="name">Имя:</label>
  <input type="text" id="name" name="name">

  <label for="email">Email:</label>
  <input type="email" id="email" name="email">

  <label for="password">Пароль:</label>
  <input type="password" id="password" name="password">
</form>

Для выбора элементов по значению их атрибута используется селектор атрибута. В данном случае, чтобы выбрать `input` с `type="text"`, используйте селектор `input[type="text"]`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Стиль кнопки при нажатии

Задача: Добавить визуальный отклик кнопке в момент нажатия (когда кнопка мыши зажата на элементе). Измените её фон на еще более темный (`#003891`) и немного сместите вниз и вправо, используя `transform`. Допишите псевдокласс для состояния активности (нажатия).

CSS

button {
  background-color: #007bff;
  color: white;
  padding: 10px 15px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.1s ease;
}

button:hover {
  background-color: #0056b3;
}

/* Стиль для кнопки в момент нажатия */
buttoninput1 {
  background-color: #003891;
  transform: translate(1px, 1px);
}

                     button {
  background-color: #007bff;
  color: white;
  padding: 10px 15px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.1s ease;
}

button:hover {
  background-color: #0056b3;
}

/* Стиль для кнопки в момент нажатия */
buttoninput1 {
  background-color: #003891;
  transform: translate(1px, 1px);
}

HTML

<button>Кликни и держи</button>

Псевдокласс `:active` применяется к элементу в момент его активации (например, при нажатии кнопки мыши). Свойство `transform` с функцией `translate()` позволяет сдвигать элемент.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку