CheckBox size increase

I wanted to increase the width and height of input radio. But when i do the following CSS styles, it makes the width of field surrounding radio box increases.

   input[type="checkbox"]{
  width: 30px; /*Desired width*/
  height: 30px; /*Desired height*/
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

what is the problem here. I just wanted to increase the round size of radio input

Thanks