如果选中无线电，则在标签周围边框 [英] Border around label if radio is checked

问题描述

可能存在重复：

复选框被勾选

我希望标签在检查收音机时获得红色边框。

到目前为止的代码：

HTML：

 < center style =margin-top：20px; > 
 
< label class =big> 
这是一个盒子1 
< input name =radio-group1type =radio/> 
< / label> 
 
< br /> 
 
< label class =big> 
这是一个盒子2 
< input name =radio-group1type =radioclass ='sex'/> 
< / label> 
 
< / center> 
  

CSS：

  .big {
 display：block; 
 width：100px; 
 height：100px; 
 background-color：gainsboro; 
光标：指针; 
} 
 
 .big：hover {
 
 border：1px solid blue; 
} 
  

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

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

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

HTML

 < center style =margin-top：20px;> 
 
< div class =big> 
< input id =box1name =radio-group1type =radio/> 
< label for =box1>这是一个盒子1< / label> 
< / div> 
 
< br /> 
 
< div class =big> 
< input id =box2name =radio-group1type =radio/> 
< label for =box2>这是一个框2< / label> 
< / div> 
 
< / center> 
  

CSS

  .big {
 display：block; 
 width：100px; 
 height：100px; 
 background-color：gainsboro; 
光标：指针; 
职位：亲属; 
} 
 
 .big：hover {
 
 border：1px solid blue; 
} 
 
 
标签{
 width：100％; 
身高：100％; 
 display：block; 
} 
 
 input [type =radio] {
 position：absolute; 
 top：20px; 
剩下：50％; 
} 
 
 input [type =radio]：checked + label {
 border：red 1px solid; 
} 
 
  

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

但它开始变得奇怪。一个小小的javascript不会伤害。

编辑：这个版本是一点清洁剂

Possible Duplicate:
Highlight label if checkbox is checked (html/css)

I would like label to get a red border if radio is checked.

Code so far:

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;
}

No JS solutions please. I have been trying with sibling and children selectors but unsuccesfuly.

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

解决方案

You would have to rearrange the HTML so the label/red-border-element comes after the radio.

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/

But it starts getting weird. A little javascript wouldn't hurt.

edit: this version is a little cleaner

这篇关于如果选中无线电，则在标签周围边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！