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

Question

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

产生以下内容：

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

Answer 1

试试这个：

申请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;

Answer 2

尝试border-color属性：

.chk-circle input[type=checkbox]:checked + label {
    border-style: solid;
    border-color: #0f0;
}

Answer 3

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>

Answer 4

如果你可以改变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