HTML

Question

可能重复：
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/

Answer 1

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

Answer 2

您必须重新排列HTML，以便标签/ red-border-element位于收音机之后。

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

Answer 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中添加一个类，但这只是一个“概念证明”。我添加的其余部分只是模仿你的例子中的布局的一些定位。这还需要一些微调。

工作示例如下：http://jsfiddle.net/QqVCu/14/

如果检查无线电，则在标签周围边框

3 个答案:

HTML

CSS