Q:

Input type checkbox cant style proprerly

I want to style a checkbox I don't have a label though .i but my styling is not applied for that input I couldn't figure out why.be fore I ask this I went through some similar issue in the stack overflow but nothing works for me. I will add my codepen example with this.
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>title</title>
  </head>
  <body>
    <input type="checkbox" value="">
   </body>
</html>

My styling
input[type=checkbox]:before {
  background-color: #00f279;
  border-color: #000000;
  color: #ffffff;
}

input[type=checkbox] {
     transform: scale(1.5);
     -ms-transform: scale(1.5);
     -webkit-transform: scale(1.5);
      padding: 5px;
      vertical-align: middle;
      background-color :#ffffff;
 }

CodePen Demo 

A:

You have to apply  -webkit-appearance: none;. This will remove all browser styles and you try applying your style.
input[type=checkbox]{
 border:1px solid red;
 transform: scale(1.5);
 -ms-transform: scale(1.5);
 -webkit-transform: scale(1.5);
 -webkit-appearance: none;
  padding: 5px;
  vertical-align: middle;
  background-color :#ffffff;

}
Now on the checked state, you have to apply another css with the background image.

