Изменить Родительский div на входе[type=checkbox]: проверено с помощью css [duplicate]

этот вопрос уже есть ответ здесь:

Я могу выяснить, как изменить Родительский div, когда флажок установлен :( Изменение следующего абзаца отлично работает.

пробовал этот подход без везения в Хром:

HTML-код

​<div>
    <input type="checkbox​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​" checked>
    <p>Test</p>
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

в CSS

div {
    background: pink;
    width: 50px;
    height:50px;
}
div + input[type=checkbox]:checked {
  background: green;
}

input[type=checkbox]:checked + p {
    background: blue;
}

​ http://jsfiddle.net/lajlev/3xUac/

13
checkbox checked css css-selectors

2 ответов

нет способа выбрать родителя только с CSS (до CSS4), поэтому вы должны использовать JS..

см. этот пост, который говорит об этом здесь.

9

попробуйте это :

HTML-код

<input type="checkbox" checked>
<div>
   <p>Test</p>
</div>

в CSS

div {
    background: pink;
    width: 50px;
    height:50px;
}
input[type=checkbox]:checked + div {
  background: green;
}

input[type=checkbox]:checked + div p {
    background: blue;
}

демо

6