Make radio button bigger?

Try this code:

 input[type='radio'] { 
     transform: scale(2); 
 }

You can easily able to set it's height and width as with any element.

Here is the fiddle with code

JSFIDDLE BIG RADIO BUTTON

HTML

<input id="r1" type="radio" name="group1" class="radio1" />
<label for="r1">label 1 text</label>
<input id="r2" type="radio" name="group1" class="radio2" />
<label for="r2">label 2 text</label>
<input id="r3" type="radio" name="group1" class="radio3" />
<label for="r3">label 3 text</label>
<input id="r4" type="radio" name="group1" class="radio4" />
<label for="r4">label 4 text</label>

CSS

input[type=radio] {
    display: none;
}
input[type=radio] + label::before {
    content: '';
    display: inline-block;
    border: 1px solid #000;
    border-radius: 50%;
    margin: 0 0.5em;
}
input[type=radio]:checked + label::before {
    background-color: #ffa;
}

.radio1 + label::before {
    width: 0.5em;
    height: 0.5em;
}

.radio2 + label::before {
    width: 0.75em;
    height: 0.75em;
}

.radio3 + label::before {
    width: 1em;
    height: 1em;
}

.radio4 + label::before {
    width: 1.5em;
    height: 1.5em;
}

Styling radio button is not easy.

Form elements in general are either problematic or impossible to style using CSS alone.

Just go through this link for your own style with bigger size for radio buttons..

Also look at this link...

Bigger radio buttons


You can do it using CSS but browser and OS also impact on this. Look at following article.

Styling radio buttons with CSS


Don't use transform: scale(1.3), it really looks horrible. Just use this:

input[type='radio'] {
  height: 15px;
  width: 15px;
  vertical-align: middle;
}
<input type="radio">Select this item