CSS - Change background color of parent div to check input

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>

Run codeHide result

Which gives the following:

I want to make the outer circle turn green when the input is verified, I tried the following, but the opposite happens:

Answer 1

Try the following:

Apply using property border:

Update

I added ito create a bullet. If you need to increase the size of the bullet, increase the width & heighttag i. Also add text to the label. Both conditions work

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

Run codeHide result

Answer 2

Try the border-colorproperty:

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

Hide result

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