Input type checkbox cant style proprerly

Question

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

You can't style a checkbox cross browser unfortunately. What you need is the so called [checkbox hack](https://css-tricks.com/the-checkbox-hack/). What you'll basically be doing is hiding the current checkbox and making a fake one. Then people will be actually clicking on the label instead of the actual checkbox and your actual checkbox will still work properly. The question is, is it okay to add a label? If so, then you're good to go. — Jabberwocky, Sep 30 '19 at 08:23
Let's try to read [the answer](https://stackoverflow.com/questions/4148499/how-to-style-a-checkbox-using-css). I hope it will be useful for You — dmand, Sep 30 '19 at 08:30
have a look on this example : https://codepen.io/bbodine1/pen/novBm — Sunil Kumar, Sep 30 '19 at 08:34

score 2 · Accepted Answer · answered Sep 30 '19 at 08:29

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.

score 0 · Answer 2 · answered Sep 30 '19 at 08:40

add Height and width as well, for [after || before ] you need to add (content too ) in css

checkout this

input[type=checkbox]:before {
  content:'x';
  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;
  height: 20px;
    width: 20px;
 }

Input type checkbox cant style proprerly

2 Answers2