-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.

Community
  • 1
  • 1
Deepika
  • 331
  • 2
  • 7
  • 20

3 Answers3

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;
}
SW4
  • 69,876
  • 20
  • 132
  • 137
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

Yasser Shaikh
  • 46,934
  • 46
  • 204
  • 281
  • +1 This would be my choice if you wish to have the same style – SW4 May 15 '14 at 09: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 '14 at 09:50
1

You can just use the CSS zoom feature.

h1 {
  zoom:200%
}
<h1><input type="radio"></h1>
Komali
  • 77
  • 10