title: How to style a checkbox after it is checked?
body: <p><strong>react.js</strong></p>
  <pre><code>&lt;div className='check'&gt;
            &lt;input
            type='checkbox'
            className='checkbox'
            id='termschkbx'
            //  style={{backgroundColor: &quot;#DE1F48&quot;, color: &quot;#30333F&quot;}}
            checked={this.state.isChecked}
            // onClick={this.isClicked}
            onChange= {this.isChecked}
            &gt;
            &lt;/input&gt;
          
            &lt;span&gt;I agree to Terms &amp; Conditions.&lt;a href=&quot;&quot; className='readme'&gt;Read here&lt;/a&gt; &lt;/span&gt;
   &lt;/div&gt;
          
  </code></pre>
  <p><strong>style.css</strong></p>
  <pre><code>.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;
    } 
  </code></pre>
  <blockquote>
  <p>nothing reflects on my checkbox after it is clicked. what can be done?
  I even tried inline styling. That didn't work as well.</p>
  </blockquote>
  <p><strong>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</strong></p>