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

Does this answer your question? [How to style a checkbox using CSS](https://stackoverflow.com/questions/4148499/how-to-style-a-checkbox-using-css) — לבני מלכה, Jun 02 '21 at 04:51
you tried to style the input inside `.checkbox` but your input **IS** the `.checkbox`. you have to do it `.check input[type=checkbox]` — לבני מלכה, Jun 02 '21 at 04:55

no ai please · Accepted Answer · 2021-06-13T18:06:13.323

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>

How to style a checkbox after it is checked?

1 Answers1