👩‍💻 :checked в CSS

Псевдокласс, который активируется, когда пользователь отмечает чекбокс или выбирает одну из радиокнопок. С его помощью удобно стилизовать эти элементы в их активном состоянии.

После селектора, который выбирает элемент чекбокса или радиокнопки, ставим двоеточие и пишем ключевое слово checked:

option:checked {
  background-color: #2E9AFF;
  color: #18191C;
}

💡 Этот псевдокласс есть только у тех элементов, которые можно отметить: <input type="checkbox">, <input type="radio">.

💡 По задумке должен работать и с <option>, но поскольку выпадающий список сильно отличается от системы к системе и от браузера к браузеру, то пока работает только в браузере Chrome на Windows. Так что ждём и надеемся, но особо не используем.

#css

⚙️ Создание анимированной кнопки с эффектом нажатия на CSS

В этом примере мы создадим анимированную кнопку с использованием CSS. Кнопка будет иметь эффект изменения размера при нажатии, что сделает интеракцию с пользователем более приятной.

<button class="animated-button">Нажми меня</button>

.animated-button {
  padding: 10px 20px;
  font-size: 16px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: transform 0.2s ease;
}

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

.animated-button:active {
  transform: scale(0.95); /* Изменение размера при нажатии */
}

#HTML #CSS