Make radio button bigger? - html

Question

Is there any way to make a radio button bigger using CSS?
If not, how else can I do it?

Answer 1

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

Answer 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

Answer 3

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

Answer 4

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

Answer 5

Try this:
HTML
<label>
<input type="radio" value="1">
<div></div>
</label>
CSS
input[type="radio"] {
display: none;
}
input[type="radio"] + div {
height: 20px;
width: 20px;
display: inline-block;
cursor: pointer;
vertical-align: middle;
background: #FFF;
border: 1px solid #d2d2d2;
border-radius: 100%;
}
input[type="radio"] + div:hover {
border-color: #c2c2c2;
}
input[type="radio"]:checked + div {
background:gray;
}
DEMO: http://jsfiddle.net/nuzhysgg/

Answer 6

There might be some quirky <span> tricks inside radio elements but I imagine using them across different browsers would be annoying to debug.
I've used this script in the past but not recently.

Answer 7

CSS3 transform scale is blurry. Setting height & width does not work with FF (even the newest 66 does not support, 2020). The only cross-browser solution is custom HTML markup + CSS, which unfortunatelly is not the easiest way. See helpful tutorial custom radios & checkboxes.