Как создать стилизованные чекбоксы и радио-кнопки

В этой статье мы рассмотрим, как создать стилизованные чекбоксы и радио-кнопки с помощью HTML, CSS и немного JavaScript. Это поможет сделать ваш сайт более красивым и пользовательским. 😊

Основы стилизации чекбоксов и радио-кнопок

Чтобы начать стилизацию, нам нужно сначала создать основной HTML-код для чекбоксов и радио-кнопок. Вот базовый пример:

<label>
  <input type="checkbox" name="checkbox-example">
  Checkbox
</label>

<label>
  <input type="radio" name="radio-example">
  Radio button
</label>

Теперь, когда у нас есть базовый код, давайте перейдем к стилизации.

Стилизация чекбоксов

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

Шаг 1: Скрыть оригинальные чекбоксы

input[type="checkbox"] {
  display: none;
}

Шаг 2: Добавить кастомный элемент

<label>
  <input type="checkbox" name="checkbox-example">
  <span class="custom-checkbox"></span>
  Checkbox
</label>

Шаг 3: Стилизация кастомного элемента

.custom-checkbox {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 1px solid #ccc;
  cursor: pointer;
}

Шаг 4: Изменение стиля при выборе чекбокса

input[type="checkbox"]:checked + .custom-checkbox {
  background-color: #007bff;
  border-color: #007bff;
}

Курсы по программированию

Помогаем получить новую профессию с гарантией трудоустройства!

Подробнее

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

Стилизация радио-кнопок аналогична стилизации чекбоксов, но с некоторыми различиями.

Шаг 1: Скрыть оригинальные радио-кнопки

input[type="radio"] {
  display: none;
}

Шаг 2: Добавить кастомный элемент

<label>
  <input type="radio" name="radio-example">
  <span class="custom-radio"></span>
  Radio button
</label>

Шаг 3: Стилизация кастомного элемента

.custom-radio {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 1px solid #ccc;
  border-radius: 50%;
  cursor: pointer;
}

Шаг 4: Изменение стиля при выборе радио-кнопки

input[type="radio"]:checked + .custom-radio {
  background-color: #007bff;
  border-color: #007bff;
}

🎉 Теперь у вас есть красивые стилизованные чекбоксы и радио-кнопки на вашем сайте!

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

Удачи в веб-разработке и изучении новых техник! 😄

Тест на профориентацию

За 10 минут узнайте, как ваш опыт пригодиться в IT индустрии

Подробнее