Эмуляция метода onclick с помощью CSS

[Rezy1337]

Доброго времени суток, сегодня я расскажу как мы можем использовать CSS для эмуляции onclick.
Данный способ будет полезен когда мы не можем использовать JS в своем проекте.

Мы можем использовать HTML теги для достижения нашей цели:

Тег "label" позволяет вам нажать на него, это будет рассматриваться как нажатие на связанный "input".
Иными словами, мы просто свяжем один элемент с другим.

<label>Нажми на меня :)
 <input type='text' name='input'    id='input'>
</label>

Второй способ - использование атрибута for, чтобы связать "input" по ID элемента.

<label for="input">Нажми на меня :)</label>
<input type='checkbox' name='clickme' id='input'>

В CSS у нас есть класс, который позволяет нам выполнять действие, основанное на состоянии тега "input", но оно связанно только с "radio" и "checkbox"

 input[type=checkbox] {
   content: "Unchecked";
 }

 input[type=checkbox]:checked {
   content: "Checked";
 }

К сожалению, тег "input" позволяет вам взаимодействовать только с самим собой.
Есть некоторые ограничения, которые вы должны понимать, прежде чем использовать этот метод.

Пример использования прикреплен с гайду.