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

    

        
            employee1
            
        
    
    

        
            employee1