'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

javascriptangularjshtmlcsscheckbox


Solution 1:[1]

It's not possible to alter the width/height of native radio and checkbox inputs. It's a limitation of most browsers (some do support changing the size of these inputs, but it's not crossbrowser). You should consider using a library or jquery plugin to do this, most of what i've seen was done by using images that looked like those inputs and simulate the original input which was hidden behind the scenes.

Solution 2:[2]

you can use transform property 

    transform: scale(2,2);

It might not work in some browsers so use -webkit-, -moz-, or -o- and large scale value might give it depixelated look..

Solution 3:[3]

Short & simple style of manipulating the checkbox element:

<input type="checkbox" style="width:20px;height:20px">


<!--you can use "radio" for radio button type-->
<input type="checkbox" style="width:30px;height:30px">

codepen for dynamic rendering

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 taxicala
Solution 2 N Kumar
Solution 3 Alex Mo

Related Questions