Resizing radio button

html css radio-button

43,219

Solution 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

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

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

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

View more solutions

43,219