CODEWITHSUNDEEP
htmlcss
Lee
Lee

Reputation: 1495

CSS - Change parent div background-color on input check

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

Which produces the following:

enter image description here

What I want to do is have the outer circle turn green when the input is checked, I have tried the following but the reverse happens:

enter image description here

Upvotes: 4

Views: 4550

Answers (4)

prasanth
prasanth

Reputation: 22510

Try this:

Apply with border property :

Updated

I was added the i for bullet creation.If you need increase the bullet size increase the width & height of I tag.And also added text in label. Both condition are working

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

Upvotes: 2

m.popov
m.popov

Reputation: 566

if you can change the structure of your html:

<input class="chk-hide" type="checkbox" id="chk1"/>
<div class="chk-circle">
 <label for="chk1"></label>
</div>

you can do it like this:

.chk-hide[type=checkbox]:checked +.chk-circle {background: green;}

Example

Upvotes: 0

Purushothaman
Purushothaman

Reputation: 358

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>

Upvotes: 0

Sebastian Kaczmarek
Sebastian Kaczmarek

Reputation: 8515

Try border-color property:

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

Upvotes: 0

Related Questions