How to style a checkbox after it is checked? - html

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>