How to change the size of the radio button using CSS?

Question

Is there a way to control the size of the radio button in CSS ?

Answer 1

Not directly. In fact, form elements in general are either problematic or impossible to style using CSS alone. the best approach is to:

1. hide the radio button using javascript.
2. Use javascript to add/display HTML that can be styled how you like e.g.
3. Define css rules for a selected state, which is triggered by adding a class "selected" to yuor span.
4. Finally, write javascript to make the radio button's state react to clicks on the span, and, vice versa, to get the span to react to changes in the radio button's state (for when users use the keyboard to access the form). the second part of this can be tricky to get to work across all browsers. I use something like the following (which also uses jQuery. I avoid adding extra spans too by styling and applying the "selected" class directly to the input labels).

javascript

var labels = $("ul.radioButtons).delegate("input", "keyup", function () { //keyboard use
        if (this.checked) {
            select($(this).parent());
        }
    }).find("label").bind("click", function (event) { //mouse use
        select($(this));
    });

function select(el) {
    labels.removeClass("selected");
    el.addClass("selected");
}

html

<ul class="radioButtons">
    <li>
        <label for="employee1">
            employee1
            <input type="radio" id="employee1" name="employee" />
        </label>
    </li>
    <li>
        <label for="employee2">
            employee1
            <input type="radio" id="employee2" name="employee" />
        </label>
    </li>
</ul>

Answer 2

A solution which works quite well is described right here: https://developer.mozilla.org/fr/docs/Web/HTML/Element/Input/radio

The idea is to use the property (appearance), which when sets to none allows to change the width and height of the radio button. The radio buttons are not blurry, and you can add other effect like transitions and stuff.

Here's an example :

input {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  border-radius: 50%;
  width: 16px;
  height: 16px;

  border: 2px solid #999;
  transition: 0.2s all linear;
  margin-right: 5px;

  position: relative;
  top: 4px;
}

input:checked {
  border: 6px solid black;
  outline: unset !important /* I added this one for Edge (chromium) support */
}

The only drawback is that it is not supported yet on IE.

Here's a GIF (with a not so good rendering) below to give an idea of what can be achieved: you will get way better results on an actual browser.

And the plunker : https://plnkr.co/plunk/1W3QXWPi7hdxZJuT