html - 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 用于元素符号创建。如果您需要增加元素符号大小，请增加 I 标签的 width & height。并且还在标签中添加了文本。两种情况都有效

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

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