Resizing radio button [duplicate]

Question

I want to change size of a radio button control using only HTML and/or CSS.

Is it possible to do without using images?

Global

You might want to read and apply the information in the how to ask page. You'll get more meaningful answers that way. – Abbasid

Answer 1

One quick solution to resizing the radio button is to transform it:

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

This results in all radio buttons being twice as large. As always, check browser support.

Original Answer (May 27, 2012)

You cannot change the size of the radio button. Typically people will design a custom UI element to replace the UI aspect of the checkbox/radiobutton. Clicking it results in a click on the underlying checkbox/radio button.

See an example here: http://webdesign.maratz.com...radio-buttons/jquery.html

Cicatrize

A setting of scale(1.2) looks good and works well in Chrome, Firefox, IE 9-11 but not in Safari where the radios and checkboxes double in size and look ridiculous. Even at scale(1.05) they double in size. Interestingly, smaller sizes such as scale(0.5) and scale(0.99) have no visible effect in Safari. – Periodical

Sorry, I now see that it's not a Safari-specific problem but a Mac one, as I have the same silly doubling in Chrome on Mac. Chrome on Windows behaves as expected. – Periodical

Answer 2

Not really, not in a cross-browser manner. In Firefox, Safari, and Chrome, you can remove the default radio-button styling by setting appearance:none; (with vendor prefixes), then you can style it as you like. But IE and Opera don't support this yet.

The only reliable way to achieve styled checkboxes is to use javascript to make a different element act like a checkbox. But, of course, then you're screwing people with javascript disabled. In the end, the problem is sticky enough that I tend to leave checkboxes unstyled except for positioning.

Bolick

Answer 3

Given HTML similar to the following:

<label>
    <input type="radio" name="group1" /><span class="radio1"></span>label 1 text</label>
<label>
<!-- and so on... -->

The following CSS allows you to add a class to resize the 'fake' radio element:

/* Hiding the radio inputs: */
input[type=radio] {
    display: none;
}
/* styling the spans adjacent to the radio inputs: */
input[type=radio] + span {
    display: inline-block;
    border: 1px solid #000;
    border-radius: 50%;
    margin: 0 0.5em;
}
/* styling the span following the checked radio: */
input[type=radio]:checked + span {
    background-color: #ffa;
}
/* defining the height/width for the span-radio: */
.radio1 {
    width: 0.5em;
    height: 0.5em;
}
/* and so on... */

JS Fiddle demo.

The above version does require an added element, which feels unnecessary, but allows for the omission of the for and id attributes from the label and input elements (respectively). If you're able to use those attributes, however, then the span elements aren't necessary, which allows HTML such as the following:

<input id="r1" type="radio" name="group1" class="radio1" />
<label for="r1">label 1 text</label>

With the CSS:

input[type=radio] {
    display: none;
}
/* Creating the psuedo-element to replace the radio inputs: */
input[type=radio] + label::before {
    content: '';
    display: inline-block;
    border: 1px solid #000;
    border-radius: 50%;
    margin: 0 0.5em;
}
/* styling the checked 'radio': */
input[type=radio]:checked + label::before {
    background-color: #ffa;
}
/* defining the height/width of the 'radio' according to the class of
   the radio input element: */
.radio1 + label::before {
    width: 0.5em;
    height: 0.5em;
}
/* and so on... */

JS Fiddle demo.

It goes without saying, of course, that these approaches require browsers that understand the :checked pseudo-class and, in the event of the latter approach, a browser that implements psuedo-elements. With that in mind, sadly, neither of these approaches can be used in Internet Explorer before version nine (when it began to implement the :checked selector).

References:

• 'CSS Selectors,' at Quirksmode.

Nolte

Answer 4

Styling radio button is not as easy as other form elements, but still you can do it with the help of css, by setting height and width, but the design differs from browsers The size look and feel can be changed, refer this link for reference, http://www.456bereastreet.com/lab/styling-form-controls-revisited/radio-button/

You can either prefer javascript or UI images for clear changes.

thanks ..

Magnetoelectricity

Answer 5

if you don't care about IE8, you can do:

HTML:

<div class="cb_wrap">
  <input type="checkbox" />
  <div class="cb_dummy"></div>
</div>​

CSS:

.cb_wrap{
  position: relative            
}

input{
  opacity: 0;  
  position: relative;
  z-index: 10;
}

.cb_dummy{
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;  
  width: 15px;
  height: 15px;
  background: #f00;    /* use some image */
}

input:checked + .cp_dummy{
  background: #0f0;   /* use some image */
}

Demo: http://jsfiddle.net/FKqj3/

Biomedicine

Pointless bunch of extra elements there. – Bini