Bigger Check Box

by pappy

HTML

<input type="checkbox" />

CSS

input[type="checkbox"]{
cursor: pointer;
-webkit-appearance: none;
appearance: none;
background: #fff;
border-radius: 5px;
box-sizing: border-box;
position: relative;
box-sizing: content-box ;
width: 30px;
height: 30px;
border-width: 0;
transition: all .3s linear;
    border: 2px solid #ccc;
}
input[type="checkbox"]:checked{
  background-color: #3997FA;
    content: "+";
}
input[type="checkbox"]:checked:after{
  color: #fff;
    font-size: 22px;
    content: "+";
    margin: 0 auto;
padding-left: 8px;
}
input[type="checkbox"]:focus{
  outline: 0 none;
  box-shadow: none;
}