选中单选按钮标签的CSS选择器

是否可以将css(3)样式应用到选中单选按钮的标签?

我有以下标记:

<input type="radio" id="rad" name="radio"/>
<label for="rad">A Label</label>

我希望的是

label:checked { font-weight: bold; }

会做些什么，但是，唉，它没有(如我所料)。

是否有一种选择器可以实现这种功能?如果有帮助，你可以使用div等，但最好的解决方案是使用标签“for”属性。

值得注意的是，我能够为我的应用程序指定浏览器，所以最好的类css3等。

当前回答

我知道这是一个老问题，但如果你想有<input>是<label>的子，而不是让他们分开，这里是一个纯CSS的方式，你可以完成它:

:checked + span { font-weight: bold; }

然后用<span>对文本进行换行:

<label>
   <input type="radio" name="test" />
   <span>Radio number one</span>
</label>

在JSFiddle上可以看到。

2013-06-20 06:27:59

其他回答

试试+符号: 它是相邻兄弟组合子。它结合了两个具有相同父元素的简单选择器序列，并且第二个选择器必须紧跟在第一个选择器之后。

是这样的:

input[type="radio"]:checked+label{ font-weight: bold; } 
 //a label that immediately follows an input of type radio that is checked

非常适合以下标记:

<input id="rad1" type="radio" name="rad"/><label for="rad1">Radio 1</label>
<input id="rad2" type="radio" name="rad"/><label for="rad2">Radio 2</label>

．.．它将适用于任何结构，有或没有div等，只要标签遵循无线电输入。

例子:

input[type=“radio”]：checked+label { font-weight： bold; } <input id=“rad1” type=“radio” name=“rad”/><label for=“rad1”>Radio 1</label> <input id=“rad2” type=“radio” name=“rad”/><label for=“rad2”>Radio 2</label>

2009-09-16 08:54:43

我忘了我第一次在哪里看到它，但你实际上可以将标签嵌入到容器的其他地方，只要你有for=属性集。所以，让我们来看看一个关于So的例子:

* { padding: 0; margin: 0; background-color: #262626; color: white; } .radio-button { display: none; } #filter { display: flex; justify-content: center; } .filter-label { display: inline-block; border: 4px solid green; padding: 10px 20px; font-size: 1.4em; text-align: center; cursor: pointer; } main { clear: left; } .content { padding: 3% 10%; display: none; } h1 { font-size: 2em; } .date { padding: 5px 30px; font-style: italic; } .filter-label:hover { background-color: #505050; } #featured-radio:checked~#filter .featured, #personal-radio:checked~#filter .personal, #tech-radio:checked~#filter .tech { background-color: green; } #featured-radio:checked~main .featured { display: block; } #personal-radio:checked~main .personal { display: block; } #tech-radio:checked~main .tech { display: block; } <input type="radio" id="featured-radio" class="radio-button" name="content-filter" checked="checked"> <input type="radio" id="personal-radio" class="radio-button" name="content-filter" value="Personal"> <input type="radio" id="tech-radio" class="radio-button" name="content-filter" value="Tech"> <header id="filter"> <label for="featured-radio" class="filter-label featured" id="feature-label">Featured</label> <label for="personal-radio" class="filter-label personal" id="personal-label">Personal</label> <label for="tech-radio" class="filter-label tech" id="tech-label">Tech</label> </header> <main> <article class="content featured tech"> <header> <h1>Cool Stuff</h1> <h3 class="date">Today</h3> </header> <p> I'm showing cool stuff in this article! </p> </article> <article class="content personal"> <header> <h1>Not As Cool</h1> <h3 class="date">Tuesday</h3> </header> <p> This stuff isn't nearly as cool for some reason :(; </p> </article> <article class="content tech"> <header> <h1>Cool Tech Article</h1> <h3 class="date">Last Monday</h3> </header> <p> This article has awesome stuff all over it! </p> </article> <article class="content featured personal"> <header> <h1>Cool Personal Article</h1> <h3 class="date">Two Fridays Ago</h3> </header> <p> This article talks about how I got a job at a cool startup because I rock! </p> </article> </main>

唷。这对于一个“样本”来说太多了，但我觉得它确实能说明问题:我们当然可以为一个已检查的输入控件选择一个标签，而不是它的兄弟姐妹。秘密在于将子输入标记保留为它们需要的内容(在本例中，只保留body元素)。

因为label元素实际上没有使用:checked伪选择器，所以标签存储在头文件中并不重要。它确实有一个额外的好处，因为标头是一个兄弟元素，我们可以使用~泛型兄弟选择器从input[type=radio]:选中的DOM元素移动到标头容器，然后使用后代/子选择器访问标签本身，当它们各自的复选框/复选框被选中时，允许对它们进行样式化。

我们不仅可以设置标签的样式，还可以设置相对于所有输入的兄弟容器的后代的其他内容的样式。现在是大家期待已久的时刻，JSFIDDLE!去那里，玩它，让它为你工作，找出为什么它工作，打破它，做你所做的!

希望这一切都是有意义的，并完全回答了问题，以及可能出现的任何后续问题。

2017-03-31 04:21:29

我知道这是一个老问题，但如果你想有<input>是<label>的子，而不是让他们分开，这里是一个纯CSS的方式，你可以完成它:

:checked + span { font-weight: bold; }

然后用<span>对文本进行换行:

<label>
   <input type="radio" name="test" />
   <span>Radio number one</span>
</label>

在JSFiddle上可以看到。

2013-06-20 06:27:59

如果您的输入是标签的子元素，并且您有多个标签，您可以将@Mike's trick与Flexbox + order结合使用。

label.switchLabel { display: flex; justify-content: space-between; width: 150px; } .switchLabel .left { order: 1; } .switchLabel .switch { order: 2; } .switchLabel .right { order: 3; } /* sibling selector ~ */ .switchLabel .switch:not(:checked) ~ span.left { color: lightblue } .switchLabel .switch:checked ~ span.right { color: lightblue } /* style the switch */ :root { --radio-size: 14px; } .switchLabel input.switch { width: var(--radio-size); height: var(--radio-size); border-radius: 50%; border: 1px solid #999999; box-sizing: border-box; outline: none; -webkit-appearance: inherit; -moz-appearance: inherit; appearance: inherit; box-shadow: calc(var(--radio-size) / 2) 0 0 0 gray, calc(var(--radio-size) / 4) 0 0 0 gray; margin: 0 calc(5px + var(--radio-size) / 2) 0 5px; } .switchLabel input.switch:checked { box-shadow: calc(-1 * var(--radio-size) / 2) 0 0 0 gray, calc(-1 * var(--radio-size) / 4) 0 0 0 gray; margin: 0 5px 0 calc(5px + var(--radio-size) / 2); } <label class="switchLabel"> <input type="checkbox" class="switch" /> <span class="left">Left</span> <span class="right">Right</span> </label> asd

html

<label class="switchLabel">
  <input type="checkbox" class="switch"/>
  <span class="left">Left</span>
  <span class="right">Right</span>
</label>

css

label.switchLabel {
  display: flex;
  justify-content: space-between;
  width: 150px;
}
.switchLabel .left   { order: 1; }
.switchLabel .switch { order: 2; }
.switchLabel .right  { order: 3; }

/* sibling selector ~ */
.switchLabel .switch:not(:checked) ~ span.left { color: lightblue }
.switchLabel .switch:checked ~ span.right { color: lightblue }

在JSFiddle上可以看到。

注意:兄弟选择器只在同一个父类中工作。要解决这个问题，你可以让输入隐藏在顶层使用@Nathan Blair hack。

2018-05-24 10:03:17

更新:

这只适用于我，因为我们现有的生成html是古怪的，生成标签和无线电，并给予他们两个检查属性。

没关系，为Brilliand的提议鼓掌!

如果你的标签是一个复选框的兄弟姐妹(通常情况下)，你可以使用~兄弟姐妹选择器，和标签[for=your_checkbox_id]来解决它…或者给标签一个id，如果你有多个标签(就像在这个例子中，我使用标签按钮)

我来这里也想要同样的答案，但最终在文件中找到了答案。

带有checked属性的label元素可以像这样选择: