-1

How can I increase the size of radio button?

I know there are many such questions, I went through the answers and tried implementing them, but nothing worked.

Following are among some links that I tried.

change size of radio buttons

http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/

Can anyone please suggest me a working example. Thanks.

2

3 Answers 3

3

If you dont want to change the scale, you can use CSS to create custom styling (checkbox used as an example). The advantage is you then arent limited to the browser specific look and feel of the control.

Demo Fiddle

HTML

<input type='checkbox' />

CSS

input[type=checkbox]{
    position:relative;
    margin:5px;
}
input[type=checkbox]:before{
    position:absolute;
    height:30px;
    width:30px;
    top:-5px;
    left:-5px;
    border:2px solid grey;
    content:'';
    background:white;
    border-radius:100%;
}
input[type=checkbox]:after{
    position:absolute;
    display:none;
    height:15px;
    width:15px;
    top:5px;
    left:5px;
    content:'';
    background:grey;
    border-radius:100%;
}
input[type=checkbox]:checked:after{
    display:block;
}
0
1

Heres a very basic example : http://jsfiddle.net/yrshaikh/uu47Z/

Html

<form action="/html/codes/html_form_handler.cfm" method="get">
<input type="radio" name="preferred_color" value="Red" class="red" /> Red<br />
<input type="radio" name="preferred_color" value="Blue" /> Blue<br />
<input type="radio" name="preferred_color" value="Green" /> Green<br />
</form>

Css

input[type=radio] {
    margin: 1em 1em 1em 0;
    transform: scale(3, 3);
    -moz-transform: scale(3, 3);
    -ms-transform: scale(3, 3);
    -webkit-transform: scale(3, 3);
    -o-transform: scale(3, 3);
}

Produces

enter image description here

2
  • +1 This would be my choice if you wish to have the same style
    – SW4
    May 15, 2014 at 9:46
  • This is a good choice if you want to avoid JS intervention, However the render is awful (at least on my mac/chrome), radio buttons are very pixelised
    – MJarro
    May 15, 2014 at 9:50
1

You can just use the CSS zoom feature.

h1 {
  zoom:200%
}
<h1><input type="radio"></h1>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.