How to style a checkbox after it is checked?

Question

react.js

<div className='check'>
          <input
          type='checkbox'
          className='checkbox'
          id='termschkbx'
          //  style={{backgroundColor: "#DE1F48", color: "#30333F"}}
          checked={this.state.isChecked}
          // onClick={this.isClicked}
          onChange= {this.isChecked}
          >
          </input>
        
          <span>I agree to Terms & Conditions.<a href="" className='readme'>Read here</a> </span>
 </div>
        

style.css

.checkbox{
top: -2px;
left:-45px;
width: 21px;
height: 21px;
opacity: 1;
display: inline-block;
margin-left:12px;
position: absolute;
}
.checkbox::after{
  background: #DE1F48;
color: #30333F;
}
.checkbox:checked{
background: #DE1F48;
color: #30333F;
}


 .checkbox input[type=checkbox]:checked {
  background: #DE1F48;
  color: #30333F;
  } 

nothing reflects on my checkbox after it is clicked. what can be done? I even tried inline styling. That didn't work as well.

i did research about this, there were a lot of similar questions about this but nothing worked for me. I'm a new coder so excuseme if this is silly

Answer 1

Use input[type="checkbox"]:checked . This selects checkboxes that are checked.

Here's how to use it:

If the snippet is unavailable, use this JSFiddle link.

 input[type=checkbox] { height:0px; width:0px; } input[type=checkbox]::after { height:12px; width:12px; content:"\00a0\00a0\00a0\00a0"; border:1px solid black; } /* The magic below */ input[type=checkbox]:checked::after { height:12px; width:12px; background-color:cyan; content:"✓"; border:1px solid black; }

 <input type="checkbox" id="first" /> <label for="first" id="first">Here! A Checkbox!</label>

It also works for radio buttons:

 input[type="radio"] { width:0px; height:0px; } input[type="radio"]::after { content:"\00a0\00a0\00a0\00a0"; border-radius:5px; height:10px; width:10px; position:absolute; border:1px solid black; display:inline; } input[type="radio"]:checked::after { content:"✓"; background-color:#00ffff; }

 <div> <input type="radio" name="radio" id="one" /> <label for="one">Option 1</label> </div> <hr> <div> <input type="radio" name="radio" id="two" /> <label for="two">Option 2</label> </div> <hr> <div> <input type="radio" name="radio" id="three" /> <label for="three">Option 3</label> </div>