HTML radio buttons: hide bullets

Question

I want a particular form component to act as radio buttons (only one option may be selected at a time). I do not want the radio bullets to show, however, opting for alternative presentational methods such as high light selected, or some other method. This will allow for graceful degradation: if the user browser does not support Javascript it will just degrade to basic radio buttons. I am wish to hide the bullet buttons through Javascript or CSS. Anyone know how? thanks.

Answer 1

Just the bit of hiding the radio buttons (without losing accessibility, of course) can be done with the following CSS:

input[type="radio"] {
    left: -999em;
    position: absolute;
}

Using opacity: 0; isn't ideal, as the button is still there, taking up space in the page. Positioning it out of view is the way to go.

Answer 2

I've got a simple solution working where I have a label surrounding my radio buttons with an image representing the thing being selected:

<label>
    <input type="radio" name="foo">
    <img src="...">
</label>

I have then applied the following styles:

label {
    float: left;
    width: 100px;
    height: 100px;
    position: relative;
    cursor: pointer;
}

label input[type=radio] {
    opacity: 0;
}

label img {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.5;
}

:checked + img {
    opacity: 1;
}

Essentially each label becomes a regular sized box that is completely filled by an img. The radio itself is hidden using opacity:0. The user can tell what is selected as the img next to the checked radio will be opaque whereas the others are semi-transparent. You could do various other kind of effects pretty easily.

The thing I like is that the form remains simple to process, it is just a group of radio buttons.

I used opacity for the radio buttons rather than display:none or visibility:hidden as then they are still in the tabindex and the form remains keyboard accessible.