【问题标题】：Border around label if radio is checked [duplicate]如果选中收音机，则标签周围的边框[重复]
【发布时间】：2012-08-27 23:07:53
【问题描述】：

可能重复：
Highlight label if checkbox is checked (html/css)

如果选中收音机，我希望标签有一个红色边框。

到目前为止的代码：

HTML：

<center style="margin-top:20px;">

<label class="big">
This is a box 1
<input name="radio-group1" type="radio" />
</label>

<br/>

<label class="big">
This is a box 2
<input name="radio-group1" type="radio" class='sex' />
</label>

</center>

CSS：

.big {
    display:block;
    width:100px;
    height:100px;
    background-color:gainsboro;
    cursor:pointer;
}

.big:hover {

    border:1px solid blue;
}

请不要使用 JS 解决方案。我一直在尝试使用兄弟选择器和子选择器，但没有成功。

JSFIDDLE：http://jsfiddle.net/QqVCu/10/

【问题讨论】：

这是一个关于复选框的问题的副本；单选按钮的大小写完全相同。

标签： html css

【解决方案1】：

您必须重新排列 HTML，以便标签/红色边框元素出现在收音机之后。

HTML

<center style="margin-top:20px;">

<div class="big">
    <input id="box1" name="radio-group1" type="radio" />
    <label for="box1">This is a box 1</label>
</div >

<br/>

<div class="big">
    <input id="box2" name="radio-group1" type="radio" />
    <label for="box2">This is a box 2</label>
</div >

</center>

CSS

.big {
    display:block;
    width:100px;
    height:100px;
    background-color:gainsboro;
    cursor:pointer;
    position: relative;
}

.big:hover {

    border:1px solid blue;
}


label {
    width: 100%;
    height: 100%;
    display: block;
}

input[type="radio"] {
    position: absolute;
    top: 20px;
    left: 50%;
}

input[type="radio"]:checked + label {
    border: red 1px solid;
}

http://jsfiddle.net/QqVCu/12/

但它开始变得奇怪了。一点 javascript 不会有什么坏处。

编辑：this version is a little cleaner

【讨论】：

这个技巧+1！从来不知道它，在某个时候会派上用场！ :)

【解决方案2】：

您可以使用:checked selector，但这仅适用于复选框本身。否则，纯 CSS 中会出现 no way to do it - 你将不得不求助于 JavaScript（我确实意识到你说过你想避免这种情况 - 但纯 CSS 不会这样做）。

【讨论】：

你能举个例子吗？父元素如何根据子元素获取样式？
@arxanas：对不起，我误读了这个问题。我已经更新了我的答案。遗憾的是，这对于纯 CSS 是不可能的。

【解决方案3】：

当前的 html 结构无法实现您的尝试。没有父选择器之类的东西。但是有一个兄弟选择器，它可以用来完成你所追求的。首先，您必须将 html 重组为如下内容：

<div>      
    <input name="radio-group1" id="box1" type="radio" />
    <label class="big" for="box1">
    This is a box 1</label>   
</div>


<div >    
    <input name="radio-group1" id="box2" type="radio" class='sex' /> 
    <label class="big" for="box2" >
    This is a box 2</label>
</div>

我制作了标签和输入兄弟姐妹而不是父/子。由于它们的 id 和属性，它们仍然可以正常工作。我还更改了他们的顺序，以便能够使用下一个兄弟选择器。额外的 div 需要做一些绝对定位，以按照您在小提琴中的相同顺序将它们放回原处。

接下来我添加了几行 css。真正的魔法发生在这里：

div input:checked+label  {
    border: 1px solid red;   
}

这将选择一个输入的所有“下一个兄弟”，该输入被检查并且有一个 div 作为父级。你可以进一步微调它只在收音机上工作，实际上我会在包装器 div 中添加一个类，但这只是一个“概念证明”。我添加的其余 css 只是一些定位，以模仿您在示例中的布局。这也需要一些微调。

工作示例在这里：http://jsfiddle.net/QqVCu/14/

【讨论】：