Как сделать так, чтобы с и ее текст оставались активными, когда я нажимаю на нее с помощью

#html #css

Вопрос:

Вот мои маленькие попытки в этом, попробовал использовать проверенный и целевой, но ничего не вышло

 .label-test {
  font-size: 13;
  color: #6b7072;
}

.label-test:active {
  color: #fff;
  text-transform: capitalize;
} 
 <input type="checkbox" class="input-test" id="work">
<label for="work" class="label-test">all works</label> 

Ответ №1:

Я не совсем понимаю цель, но если она заключается в том, чтобы применить text-transform: capitalize флажок, когда установлен флажок, то следующий CSS сделает это:

 input.input-test:checked   label.label-test {
  text-transform: capitalize;
}
 

Это работает за счет изменения стиля label после input того, как когда input есть checked .

Вот рабочий фрагмент, показывающий это в действии:

 .label-test {
  font-size: 13;
  color: #6b7072;
}

.label-test:active {
  color: #fff;
  text-transform: capitalize;
}

input.input-test:checked   label.label-test {
  text-transform: capitalize;
} 
 <input type="checkbox" class="input-test" id="work">
<label for="work" class="label-test">all works</label>