Make radio button bigger?

Question

Is there any way to make a radio button bigger using CSS?

If not, how else can I do it?

What exactly are you trying to achieve here? May be there is an alternative solution to this.... Like emulating Radio Button using Images.... — Starx, Dec 23 '10 at 06:09
http://stackoverflow.com/questions/7727255/how-can-i-make-an-html-radiobutton-with-a-big-target-area — Christophe Roussy, Sep 24 '13 at 15:43
@ChristopheRoussy Question, you have linked, has nothing to do with this OP's question. Here, bigger radio buttons are asked (solution is to change styles of `input` element), while in your linked question OP asks about bigger "clickable" areas (solution is to change `label` styles). [Here](http://stackoverflow.com/a/4920348/1469208), on contrary, are answers that suits OP's question asked in this question. Quickest answer ((c) [imanabidi](http://stackoverflow.com/users/184572/imanabidi)) -- "set both width and height and use em metric like : width: 1.2em; height: 1.2em". — trejder, Apr 07 '14 at 12:10
https://stackoverflow.com/questions/4920281/how-to-change-the-size-of-the-radio-button-using-css — GlennG, Oct 23 '17 at 11:04
see this link may be its help you http://www.thecssninja.com/css/custom-inputs-using-css — Bhanu Prakash Pandey, Dec 23 '10 at 05:55

score 111 · Answer 1 · edited Mar 29 '21 at 05:56

111

Try this code:

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

edited Mar 29 '21 at 05:56

J.Hpour

971
11
20

answered Oct 14 '15 at 10:37

Manish Patel

1,877
1
14
15

1

Radiobutton looks better with "transform" than using "width" and "height" and it's much simpler than the other solutions. – Jose Manuel Abarca Rodríguez Feb 29 '16 at 20:56
2

It actually does not look that bad to me. I tested on IE 11, Chrome and FF and they looked fine. Thanks! – relipse Apr 07 '16 at 13:06

KesaVan · Answer 2 · 2014-04-23T08:04:32.353

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

Would there be any way to avoid hurting usability? Apparently this doesn't work with keyboard. — wtf8_decode, May 04 '15 at 20:25

score 4 · Answer 3 · edited Mar 29 '21 at 03:10

4

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

edited Mar 29 '21 at 03:10

tacoshy

10,642
5
17
34

answered Jun 04 '19 at 06:24

Paul Kruger

2,094
7
22
49

score 2 · Answer 4 · answered Dec 23 '10 at 05:56

2

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

Styling radio buttons with CSS

answered Dec 23 '10 at 05:56

Naveed

41,517
32
98
131

score 1 · Answer 5 · answered Nov 07 '14 at 09:10

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/

Label (inline element) can't contain a DIV (block-level element) - https://stackoverflow.com/questions/18609554/is-div-inside-label-block-correct — GlennG, Oct 23 '17 at 11:07

score 0 · Answer 6 · answered Dec 23 '10 at 05:53

0

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.

answered Dec 23 '10 at 05:53

Cole

740
5
8

score 0 · Answer 7 · answered Mar 17 '20 at 16:18

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.

Make radio button bigger?

7 Answers7