Beginner: Styling ReactJS Checkbox using CSS Pseudo Elements

I am trying to style reactjs checkbox component using CSS. It uses pseudo-elements :after and :before.

Mock it up on html and css and it worked! Fiddle Link

input[type="checkbox"]#checkbox + label::before {
   content: "";
   display: inline-block;
   vertical-align: -25%;
   height: 2ex;
   width: 2ex;
   background-color: white;
   border: 1px solid #c3c4c6;
   border-radius: 4px;
   margin-right: 0.5em;
}

input[type="checkbox"]#checkbox:checked + label::after {
   content: '';
   position: absolute;
   width: 1.2ex;
   height: 0.4ex;
   background: rgba(0, 0, 0, 0); 
   top: 0.5ex;
   left: 0.4ex;
   border: 3px solid #60cd18;
   border-top: none;
   border-right: none;
   -webkit-transform: rotate(-45deg);
   -moz-transform: rotate(-45deg);
   -o-transform: rotate(-45deg);
   -ms-transform: rotate(-45deg);
   transform: rotate(-45deg); 
} 

But when i tried to implement it on my reactjs component that display checkbox,maybe the :after doesn't work. Fiddle ReactJS Component Link

How should i achieve the same style on ReactJS checkbox component?