CSS - 在输入检查时更改父div背景颜色

时间:2016-11-04 09:36:18

标签: html css

    .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>

产生以下内容:

enter image description here

我想要做的是在检查输入时将外圈变为绿色,我尝试了以下但反过来发生了:

enter image description here

4 个答案:

答案 0 :(得分:2)

试试这个:

申请border财产:

<强> 更新

我添加了i用于创建项目符号。如果您需要增加项目符号大小,请增加width & height I标记。并在标签中添加文本。两种情况都有效

.chk-circle input[type=checkbox]:checked + i {
      top:0;
      left:0;
      border:2px solid green;
    }

&#13;
&#13;
.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;
&#13;
&#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;}

Example