2

Приветствую. В примере я использовал input type="radio" для выбора "показать" "закрыть" некий блок. Как сделать так, чтобы активный radio изменил фон, т.е. lightgreen сменился на green, с красным получилось (цвета наоборот правда, но это не страшно), потому что он последующий элемент, а зеленый получается, как предыдущий элемент, так вот как выбрать чтобы предыдущий элемент менял фон при :checked? Спасибо!

body{z-index:10;positioin:relative;text-align:center;}
input{display:none;}/*радио кнопки*/
label[for="radio-1"]{background:lightgreen;}
label[for="radio-2"]{background:pink;}
label{
  cursor:pointer;
  border:1px solid #333;
  padding:5px;
  margin-top:20px;
  display:inline-block;
}
label:hover{opacity:0.6;}
label:active{background:rgba(0,0,0,0.2);}
.block{
  width:600px;
  position:absolute;
  top:80px;
  left:28%;
}
#radio-1:checked ~ .block{display:block;} .block{display:none;}
#radio-1:checked ~ label{background:red;}
<label class="green" for="radio-1">OPEN<sup>(chckd)</sup></label>
  <input type="radio" name="radio" id="radio-1" checked="checked">
<label class="red" for="radio-2">CLOSE</label>
  <input type="radio" name="radio" id="radio-2">
      <!-- -->
      <!-- -->
    <div class="block">
       <fieldset>
        <legend>HEADER</legend>
        <h1>TEXT-HEADER #1
        <strong>...some text</strong></h1>
        </fieldset>

   &lt;/div&gt;</code></pre>
kizoso
  • 9,333
Victor Kas
  • 109

2 Answers2

4
input{display:none;}/*радио кнопки*/

Сами инпуты всё равно скрыты, поэтому ты можешь поставить их в любое место в разметке. Надо их поставить раньше и, возможно, выше тех элементов, на которые они должны влиять, а затем использовать селекторы следующих видов:

#chk-i:checked ~ .smth-i
#chk-i:checked ~ .root .smth-i

В твоём случае получается так:

input {
  display: none;
}

label{
  cursor:pointer;
  border:1px solid #333;
  padding:5px;
  margin-top:20px;
  display:inline-block;
}


label:hover {
  opacity:0.6;
}


#radio-1:checked ~ label[for="radio-1"] { background: green; }
#radio-2:checked ~ label[for="radio-2"] { background: red; }
<input type="radio" name="radio" id="radio-1" checked="checked">
<input type="radio" name="radio" id="radio-2">
<label class="green" for="radio-1">OPEN<sup>(chckd)</sup></label>
<label class="red" for="radio-2">CLOSE</label>

PS: В css нельзя обратиться к более раннему элементу. Пока единственное исключение - псевдокласс :focus-within, но он тебе не помежет.

Qwertiy
  • 123,725
  • это отличный способ, не знаю почему сам не догадался...спасибо! – Victor Kas Oct 12 '17 at 16:12
  • "Сами инпуты всё равно скрыты, поэтому ты можешь поставить их в любое место в разметке. " поправлю, абы где не поставить, в пределах блока где находятся label, иначе условия работать не будут radio-1:checked ~ label[for="radio-1"] { background: green; } – Victor Kas Oct 16 '17 at 10:25
  • @VictorKas, можно и выше лейблов поставить. Селектор поменяется на radio-1:checked ~ * label[for="radio-1"] (правда звёздочку лучше заменить на что-то поточнее). – Qwertiy Oct 16 '17 at 10:36
  • @VictorKas, какой такой пример? – Qwertiy Oct 16 '17 at 12:20
  • я же удалил пост...не стал продолжать, примеры писать и т.д) не удобно тут – Victor Kas Oct 17 '17 at 13:15
  • Да ты дважды незаконченный комментарий запостил. Второй удалил, но мне ж всё равно интересно :) Пример можно на jsfiddle сделать. – Qwertiy Oct 17 '17 at 13:28
0

вот например в таком варианте условие работать не будет, пока инпут находится за пределами блока label * да, если использовать такое условие

radio-1:checked ~* label{background:red;} - работает

input{margin-bottom:20px;}
label{
  border:1px solid orange;
  padding:10px;
}
#radio-1:checked ~ label{background:red;}
<input type="radio" name="radio" id="radio-1">
<input type="radio" name="radio" id="radio-2">
<div>
  <label for="radio-1">radio-1</label>
  <label for="radio-2">radio-2</label>
</div>
Victor Kas
  • 109