选中单选按钮标签的 CSS 选择器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1431726/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS selector for a checked radio button's label
提问by Stephen
Is it possible to apply a css(3) style to a label of a checked radio button?
是否可以将 css(3) 样式应用于选中的单选按钮的标签？
I have the following markup:
我有以下标记：
<input type="radio" id="rad" name="radio"/>
<label for="rad">A Label</label>
What I was hoping is that
我希望的是
label:checked { font-weight: bold; }
would do something, but alas it does not (as I expected).
会做些什么，但可惜它没有（正如我所料）。
Is there a selector that can achieve this sort of functionality? You may surround with divs etc if that helps, but the best solution would be one that uses the label ''for'' attribute.
有没有可以实现这种功能的选择器？如果有帮助，您可以用 div 等包围，但最好的解决方案是使用标签“for”属性的解决方案。
It should be noted that I am able to specify browsers for my application, so best of class css3 etc please.
应该注意的是，我可以为我的应用程序指定浏览器，所以请使用最好的 css3 等。
回答by Stephen
try the +symbol:
It is Adjacent sibling combinator. It combines two sequences of simple selectors having the same parent and the second one must come IMMEDIATELYafter the first.
试试这个+符号：它是相邻的兄弟组合子。它结合了两个具有相同父级的简单选择器序列，第二个必须在第一个之后立即出现。
As such:
像这样：
input[type="radio"]:checked+label{ font-weight: bold; }
//a label that immediately follows an input of type radio that is checked
works very nicely for the following markup:
非常适合以下标记：
<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>
... and it will work for any structure, with or without divs etc as long as the label follows the radio input.
...它适用于任何结构，有或没有 div 等，只要标签跟随无线电输入。
Example:
例子：
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>回答by Mike
I know this is an old question, but if you would like to have the <input>be a child of <label>instead of having them separate, here is a pure CSS way that you could accomplish it:
我知道这是一个老问题，但如果你想让<input>孩子成为孩子<label>而不是让他们分开，这里有一个纯 CSS 方式，你可以完成它：
:checked + span { font-weight: bold; }
Then just wrap the text with a <span>:
然后只需用一个包裹文本<span>：
<label>
<input type="radio" name="test" />
<span>Radio number one</span>
</label>
See it on JSFiddle.
回答by Nathan Blair
I forget where I first saw it mentioned but you can actually embed your labels in a container elsewhere as long as you have the for=attribute set. So, let's check out a sample on SO:
我忘记了我第一次看到它提到的地方，但您实际上可以将标签嵌入其他地方的容器中，只要您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>Whew. That was a lot for a "sample" but I feel it really drives home the effect and point: we can certainly select a label for a checked input control without it being a sibling. The secret lies in keeping the inputtags a child to only what they need to be (in this case - only the bodyelement).
哇。对于一个“样本”来说，这已经很多了，但我觉得它确实推动了效果和要点：我们当然可以为已检查的输入控件选择一个标签，而无需它是兄弟。秘诀在于将input标签保持为它们需要的子项（在这种情况下 - 只有body元素）。
Since the labelelement doesn't actually utilize the :checkedpseudo selector, it doesn't matter that the labels are stored in the header. It does have the added benefit that since the headeris a sibling element we can use the ~generic sibling selector to move from the input[type=radio]:checkedDOM element to the headercontainer and then use descendant/child selectors to access the labels themselves, allowing the ability to style them when their respective radio boxes/checkboxes are selected.
由于label元素实际上并不使用:checked伪选择器，因此标签存储在header. 它确实有一个额外的好处，因为sheader是一个兄弟元素，我们可以使用~通用的兄弟选择器从input[type=radio]:checkedDOM 元素移动到header容器，然后使用后代/子选择器来访问labels 本身，允许在它们出现时设置样式。相应的单选框/复选框被选中。
Not only can we style the labels, but also style other content that may be descendants of a sibling container relative to all of the inputs. And now for the moment you've all been waiting for, the JSFIDDLE! Go there, play with it, make it work for you, find out why it works, break it, do what you do!
我们不仅可以设置标签的样式，还可以设置其他内容的样式，这些内容可能是相对于所有inputs的同级容器的后代。现在，你们一直在等待，JSFIDDLE！去那里，玩它，让它为你工作，找出它为什么有效，打破它，做你所做的！
Hopefully that all makes sense and fully answers the question and possibly any follow ups that may crop up.
希望一切都有意义并完全回答问题以及可能出现的任何后续行动。
回答by Qwerty
If your input is a child element of the labeland you have more than one labels, you can combine @Mike's trickwith Flexbox+ order.
如果您的输入是 的子元素label并且您有多个标签，则可以将@Mike 的技巧与Flexbox+结合使用order。
<label class="switchLabel">
<input type="checkbox" class="switch"/>
<span class="left">Left</span>
<span class="right">Right</span>
</label>
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 }
See it on JSFiddle.
note: Sibling selector only works within the same parent. To work around this, you can make the input hidden at top-level using @Nathan Blairhack.
注意：兄弟选择器只能在同一个父级中使用。要解决此问题，您可以使用@Nathan Blairhack将输入隐藏在顶层。
回答by Dan Herd
You could use a bit of jQuery:
你可以使用一些 jQuery：
$('input:radio').click(function(){
$('label#' + $(this).attr('id')).toggleClass('checkedClass'); // checkedClass is defined in your CSS
});
You'd need to make sure your checked radio buttons have the correct class on page load as well.
您需要确保您选中的单选按钮在页面加载时也具有正确的类。
回答by apprenticeDev
UPDATE:
更新：
This only worked for me because our existing generated html was wacky, generating labels along with radios and giving them both checkedattribute.
这只对我有用，因为我们现有的生成的 html 很古怪，生成labels 和radios 并给它们两个checked属性。
Never mind, and big ups for Brilliand for bringing it up!
没关系，Brilliand 提出了这个问题！
If your label is a sibling of a checkbox (which is usually the case), you can use the ~sibling selector, and a label[for=your_checkbox_id]to address it... or give the label an id if you have multiple labels (like in this examplewhere I use labels for buttons)
如果您的标签是复选框的同级（通常是这种情况），您可以使用~同级选择器和 alabel[for=your_checkbox_id]来解决它……或者如果您有多个标签，则为标签提供一个 id（就像在这个例子中我为按钮使用标签）
Came here looking for the same - but ended up finding my answer in the docs.
来到这里寻找相同的 - 但最终在文档中找到了我的答案。
a labelelement with checkedattribute can be selected like so:
可以像这样选择label具有checked属性的元素：
label[checked] {
...
}
I know it's an old question, but maybe it helps someone out there :)
我知道这是一个老问题，但也许它可以帮助那里的人:)
