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

这不是 :checked 选择器不工作的事实（完全没问题），您的 CSS 没有按照您的想法行事：

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

那是没有选择label。它正在选择标签的直接兄弟（紧接其后）的选中单选按钮。您实际上需要相反的操作，但这在 CSS 中实际上是不可能的（不编辑您的标记）。

您必须在 HTML 中切换 label 和 input，然后您的 CSS 才能工作：

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

如果要将标签保留在单选按钮的左侧，只需将 float: left 添加到标签样式即可。

Answer 2

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

这段代码字面意思是

find me all input radio that are checked and follow ul.accordion label then set it backgound-color to #000

您必须颠倒这个过程才能得到您想要的。目前在 CSS 中是不可能的。

我想到的唯一解决方法是重新排序您的 DOM 结构，使用 JS 或伪 class :before 和 z-index 来创建图层活动标签。

Answer 3

由于 selector 在 CSS 中没有，您必须将 input 元素移动到 label 之前，并使用相邻的兄弟元素（+) select 或者 select 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 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 修复 order/position:

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 焦点。

CSS 选中单选按钮的标签

CSS for a checked radio button's label

html

css

accordion