CSS для отмеченной метки радиокниги

Question

У меня есть аккордеон CSS, и я пытаюсь изменить background-color активной метки. Я попытался использовать это, но не смог заставить его работать. Есть что-то, что мне не хватает?

ul.accordion label + input[type='radio']:checked { 
    background-color: #000; 
} 

---

HTML:

<ul class="accordion"> 
<li> 
    <label for="q-1">Content 1</label> 
    <input type="radio" name="a" id="q-1" checked="checked"> 
    <div class='content'> 
     <p>Content 1 blah blah blah blah</p> 
    </div> 
</li> 

<li> 
    <label for="q-2">Content 2</label> 
    <input type="radio" name="a" id="q-2"> 
    <div class='content'> 
     <p>Content 2 blah blah blah blah</p> 
    </div> 
</li> 

</ul> 

А вот мой CSS:

/* Clean up the lists styles */ 
    ul.accordion { 
    list-style: none; 
    margin: 0; 
    padding: 0; 
} 

/* Hide the radio buttons */ 
/* These are what allow us to toggle content panes */ 
ul.accordion label + input[type='radio'] { 
    display: none; 
} 

/* Give each content pane some styles */ 
ul.accordion li { 
    background-color: #fff; 
    border-bottom: 1px solid #DDDDDD; 
} 

ul.accordion ul { 
    margin-top: -15px; 
} 

/* Make the main tab look more clickable */ 
ul.accordion label { 
    background-color: #666666; 
    color: #FFFFFF; 
    display: block; 
    padding: 10px; 
    margin: -5px -10px; 
    font-size: 16px; 
    font-weight: 700; 
} 

/* Set up the div that will show and hide */ 
ul.accordion div.content { 
    overflow: hidden; 
    padding: 0 10px; 
    display: none; 
} 

/* Show the content boxes when the radio buttons are checked */ 
ul.accordion label + input[type='radio']:checked + div.content { 
    display: block; 
} 

http://jsfiddle.net/hvhL5ouk/2/

Answer 1

Поскольку нет предыдущего селектора в CSS, вам придется переместить input элемент перед тем label и использовать соседний родственный (+) селектор для выбора label когда input является :checked.

input[type="radio"]:checked + label { 
    background: #000; 
} 

---

Updated Fiddle

/* Clean up the lists styles */ 
 

 
ul.accordion { 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
/* Hide the radio buttons */ 
 

 
/* These are what allow us to toggle content panes */ 
 

 
ul.accordion input[type='radio'] { 
 
    display: none; 
 
} 
 
/* Give each content pane some styles */ 
 

 
ul.accordion li { 
 
    background-color: #fff; 
 
    border-bottom: 1px solid #DDDDDD; 
 
} 
 
/* Make the main tab look more clickable */ 
 

 
ul.accordion label { 
 
    background-color: #666666; 
 
    color: #FFFFFF; 
 
    display: block; 
 
    padding: 10px; 
 
    font-size: 16px; 
 
    font-weight: 700; 
 
} 
 
/* Set up the div that will show and hide */ 
 

 
ul.accordion div.content { 
 
    overflow: hidden; 
 
    padding: 0 20px; 
 
    display: none; 
 
} 
 
/* Show the content boxes when the radio buttons are checked */ 
 

 
ul.accordion input[type='radio']:checked + label + div.content { 
 
    display: block; 
 
} 
 
input[type="radio"]:checked + label { 
 
    background: #000; 
 
} 
 
body { 
 
    margin: 0; 
 
}

<ul class="accordion"> 
 
    <li> 
 
    <input type="radio" name="a" id="q-1" checked="checked" /> 
 
    <label for="q-1">Content 1</label> 
 
    <div class='content'> 
 
     <p>Content 1 blah blah blah blah</p> 
 
    </div> 
 
    </li> 
 
    <li> 
 
    <input type="radio" name="a" id="q-2" /> 
 
    <label for="q-2">Content 2</label> 
 
    <div class='content'> 
 
     <p>Content 2 blah blah blah blah</p> 
 
    </div> 
 
    </li> 
 
</ul>

Answer 2

Это не тот факт, что селектор :checked не работает (Это прекрасно), ваш CSS не делать то, что вы думаете, это:

ul.accordion label + input[type='radio']:checked 

Вот не выбирая label. Он выбирает проверенную радиокнопку, которая является непосредственным родственником метки (сразу после нее). Вам действительно нужно обратное, но на самом деле это невозможно в CSS (без редактирования вашей разметки).

Вы должны переключиться вокруг label и input в вашем HTML, то ваш CSS будет работать:

<input type="radio" name="a" id="q-1" checked="checked"> 
<label for="q-1">Content 1</label> 

Если вы хотите сохранить ярлык на левой стороне радио-кнопки, а затем просто добавьте float: left к стилю этикетки.

Answer 3

ul.accordion label + input[type='radio']:checked { 
    background-color: #000; 
} 

Этот код означает буквально

найти меня все входное радио, которые проверяются и следует ul.accordion этикетка затем установить его Backgound-цвет # 000

Вы бы чтобы отменить этот процесс, чтобы получить то, что вы хотите. На данный момент это невозможно в CSS.

Единственное, что мне кажется, это изменить порядок структуры DOM, используя JS или псевдокласс :before с z-index, который создаст слой на активной вкладке.

Answer 4

Это может быть возможно только с только CSS. С помощью свойства display:flex + order, чтобы обменять label, чтобы получить желаемые результаты.

Пример: https://codepen.io/tronghiep92/pen/BdrobR

Вернитесь к своему HTML-разметки.

<li> 
    <label for="q-1">Content 1</label> 
    <input type="radio" name="a" id="q-1" checked="checked"> 
    <div class='content'> 
    <p>Content 1 blah blah blah blah</p> 
    </div> 
</li> 

изменение:

<li> 
    <input type="radio" name="a" id="q-1" checked="checked" /> 
    <label for="q-1">Content 1</label> 
    <div class='content'> 
     <p>Content 1 blah blah blah blah</p> 
    </div> 
    </li> 

и зафиксировать заказ/положение с помощью CSS:

li { 
    display: flex; 
} 
label { 
    order: 0; 
} 
input{ 
    order: 1; 
} 
div.content { 
    order: 2; 
} 
input:checked ~ * { 
    /* anything here you want with label and div.content*/ 
} 

Некоторые дополнительные советы: Я всегда с помощью тега <label> оберточной <input /> потому нажмите <label> затем <input /> является focus, checked , Как в example выше щелкните значок искать затем input фокус.