.chk-circle {
width: 8px;
height: 8px;
background: #afb0b5;
border-radius: 100%;
position: relative;
float: left;
margin-top: 4px;
margin-right: 8px;
}
.chk-circle label {
display: block;
width: 4px;
height: 4px;
border-radius: 100px;
cursor: pointer;
position: absolute;
top: 2px;
left: 2px;
z-index: 1;
background: #fff;
}
.chk-hide {
visibility: hidden;
}
.chk-circle input[type=checkbox]:checked + label {
background: #63a70a;
}
<div class="chk-circle">
<input class="chk-hide" type="checkbox" id="chk1"/>
<label for="chk1"></label>
</div>
产生以下内容:
我想要做的是在检查输入时将外圈变为绿色,我尝试了以下但反过来发生了:
答案 0 :(得分:2)
试试这个:
申请border
财产:
<强> 更新 强>
我添加了i
用于创建项目符号。如果您需要增加项目符号大小,请增加width & height
I
标记。并在标签中添加文本。两种情况都有效
.chk-circle input[type=checkbox]:checked + i {
top:0;
left:0;
border:2px solid green;
}
.chk-circle > i {
position:relative;
float:left;
display: block;
width: 6px;
height: 6px;
margin-top:5px ;
border-radius: 100px;
cursor: pointer;
z-index: 1;
border:3px solid #ddd;
background: #fff;
cursor:pointer;
}
.chk-circle > label{
cursor:pointer;
margin:0 10px auto;
}
.chk-hide {
visibility: hidden;
}
.chk-circle > input[type=checkbox]:checked + i{
border:3px solid green;
}
&#13;
<div class="chk-circle">
<label for="chk1">some 1</label>
<input class="chk-hide" type="checkbox" id="chk1"/>
<i></i>
</div>
<div class="chk-circle">
<label for="chk2">some 2</label>
<input class="chk-hide" type="checkbox" id="chk2"/>
<i></i>
</div>
<div class="chk-circle">
<label for="chk3">some 3</label>
<input class="chk-hide" type="checkbox" id="chk3"/>
<i></i>
</div>
&#13;
答案 1 :(得分:0)
尝试border-color
属性:
.chk-circle input[type=checkbox]:checked + label {
border-style: solid;
border-color: #0f0;
}
答案 2 :(得分:0)
div {
background: pink;
width: 50px;
height:50px;
}
input[type=checkbox]:checked+div{
background: green;
}
input[type=checkbox]:checked + div p {
background: blue;
}
<input type="checkbox" checked>
<div>
<p>Test</p>
</div>
答案 3 :(得分:0)
如果你可以改变html的结构:
<input class="chk-hide" type="checkbox" id="chk1"/>
<div class="chk-circle">
<label for="chk1"></label>
</div>
你可以这样做:
.chk-hide[type=checkbox]:checked +.chk-circle {background: green;}