Как сделать, что бы при нажатии на чекбокс менялся цвет текста <lable>, его background и т.д.?

@lololop · Регистрация: 19.02.2013

Author24 — интернет-сервис помощи студентам

Здравствуйте.
Нужно, чтобы при нажатии на label закрашивался не только квадрат checkbox, но и менялся цвет надписи, фон. Чекбокс стилизованный (пример во вложении). То есть, возможно, при нажатии к <lable> добавляется class, или как можно это сделать?
Спасибо.

@Анар · 09.12.2015, 00:05

lololop, псевдоклассом :checked. Предоставьте код чекбоксов.

@Karssen · 09.12.2015, 00:23

http://jsfiddle.net/nq86g2qu/

HTML5

<form action="">
  <fieldset>
    <p>
      <input type="checkbox" name="first" id="first"><label for="first">первый</label>
    </p>
    <p>
      <input type="checkbox" name="second" id="second"><label for="second">второй</label>
    </p>
    <p>
      <input type="checkbox" name="third" id="third"><label for="third">третий</label>
    </p>
  </fieldset>
</form>

CSS

input[type=checkbox]{
  display:none;
}
label{
  cursor:pointer;
  display:inline-block;
  background-color:#888;
 width:200px;
  padding:5px 20px 5px 5px;
  position:relative;
}
label:after{
  content:'';
  display:block;
  position:absolute;
  width:10px;
  height:10px;
  border:1px solid blue;
  top:8px;
  right:5px;
  background-color:#fff;
}
input[type=checkbox]:checked + label{
  background-color: #aaa;
}
input[type=checkbox]:checked + label:after{
  background-color: blue;
}

@Анар · 09.12.2015, 00:44

Karssen, Karssen, забыли:

CSS

1
2
3

input[type=checkbox]:checked + label {
  color: blue;
}

@lololop · 09.12.2015, 01:03 **[ТС]**

Karssen, Анар, спасибо, помогло всё.

@lololop 0 / 0 / 0 Регистрация: 19.02.2013 Сообщений: 59
		1
	Как сделать, что бы при нажатии на чекбокс менялся цвет текста <lable>, его background и т.д.? 08.12.2015, 23:31. Показов 16013. Ответов 4 Метки нет (Все метки) Здравствуйте. Нужно, чтобы при нажатии на label закрашивался не только квадрат checkbox, но и менялся цвет надписи, фон. Чекбокс стилизованный (пример во вложении). То есть, возможно, при нажатии к <lable> добавляется class, или как можно это сделать? Спасибо. Изображения 0

@Анар 225 / 216 / 89 Регистрация: 12.09.2015 Сообщений: 986
	09.12.2015, 00:05	2
	lololop, псевдоклассом :checked. Предоставьте код чекбоксов. 0

@lololop 0 / 0 / 0 Регистрация: 19.02.2013 Сообщений: 59
	09.12.2015, 01:03 [ТС]	5
	Karssen, Анар, спасибо, помогло всё. 0