используя :: после с ~ в том же селекторе

Question

Я хотел создать пользовательскую радио-кнопку, используя ::after. Моя HTML структура выглядит следующим образом:

<div class='radio'> 
    <input type='radio' class='radio-input'> 
</div> 

и то, что я хочу, чтобы добавить ::after к radio элемента и применить некоторый стиль, когда вход проверяется. То, что я написал (и не работает) заключается в следующем:

.radio-input:checked ~ .radio::after { 
    ... 
} 

Если я использую элемент вместо ::after он работает, но я хотел бы знать, почему это не так.

Answer 1

Причина, по которой селектор .radio-input:checked ~ .radio::after не работает с вашей разметкой, заключается в том, что вы не можете таргетировать предок элементов с любым селектором. Ваш начинается с ребенка (.radio-input), доходит до родителя (.radio), а затем возвращается к дочернему псевдо. CSS каскадом вниз, он не поднимается.

Вместо этого дайте ввод истинному родному брату. Здесь я использую label потому что она соответствует стандартам доступности, которые делают, что читатели экрана могут интерпретировать вашу форму:

input:checked ~ label::before 

с разметкой, как:

<input type="checkbox" name="dubstep" id="dubstep" value="dubstep" tabindex="0"> 
<label for="dubstep">dubstep</label> 

Смотрите пример:

ul.check-or-radio-set { 
 
\t \t list-style-type: none; 
 
\t \t padding: 0; 
 
\t \t margin: 0; 
 
     position:relative; 
 
\t } 
 

 
    ul.check-or-radio-set li { 
 
     padding:0; 
 
     margin:0 0 10px 0; 
 
     height:1.6em; 
 
    } 
 

 
\t ul.check-or-radio-set input { 
 
\t \t position: absolute; 
 
\t \t left: -9999em; 
 
\t } 
 

 
\t ul.check-or-radio-set input ~ label::before { 
 
\t \t background: white; 
 
\t \t border: 2px white solid; 
 
\t \t box-shadow: 0 0 0 1px darkGray; 
 
\t \t content: '\a0'; 
 
\t \t display: inline-block; 
 
\t \t line-height: 1; 
 
\t \t text-indent: .15em; 
 
\t } 
 

 
\t ul.check-or-radio-set input[type=checkbox] ~ label { 
 
     position: relative; 
 
     margin-left: 32px; 
 
\t \t line-height: 1.4em; 
 
\t } 
 

 
\t ul.check-or-radio-set input[type=checkbox] ~ label::before { 
 
     position: absolute; 
 
\t \t margin-left: -32px; 
 
\t \t height: 1.4em; 
 
\t \t width: 1.4em; 
 
\t \t border-radius: 4px; 
 
\t \t transition: all .3s; 
 
\t \t background-image: url(http://imgh.us/checkmark-white.svg); 
 
\t \t background-position: 50%; 
 
\t \t background-repeat: no-repeat; 
 
\t \t margin-right: 10px; 
 
\t } 
 

 
\t /* checked */ 
 
\t ul.check-or-radio-set input:checked ~ label::before { 
 
\t \t background-color: orange; 
 
\t } 
 

 
\t ul.check-or-radio-set input:focus ~ label::before { 
 
\t \t box-shadow: 0 0 5px 1px #007fea; 
 
\t } 
 
\t ul.check-or-radio-set input:disabled ~ label { 
 
\t \t color: lightGray; 
 
\t \t cursor: not-allowed; 
 
\t } 
 
\t ul.check-or-radio-set input:disabled ~ label::before { 
 
\t \t background-color: gray; 
 
\t \t box-shadow: 0 0 0 1px darkGray; 
 
\t }

<ul class="check-or-radio-set"> 
 
    <li> 
 
    <input type="checkbox" name="rock" id="rock" value="rock" tabindex="0"> 
 
\t <label for="rock">rock</label> 
 
    </li> 
 
    <li> 
 
    <input type="checkbox" name="pop" id="pop" value="pop" tabindex="0" checked="checked"> 
 
\t <label for="pop">pop</label> 
 
    </li> 
 
    <li> 
 
    <input type="checkbox" name="dubstep" id="dubstep" value="dubstep" tabindex="0"> 
 
\t <label for="dubstep">dubstep</label> 
 
    </li> 
 
</ul>

Примечание: Я получил этот шаблон отсюда: https://standards.usa.gov/form-controls/ - это отличный ресурс для создания замечательных, доступных элементов управления формой.