Rectangle 27 0

javascript HTML radio buttons: hide bullets?


<label>
    <input type="radio" name="foo">
    <img src="...">
</label>
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.

I have then applied the following styles:

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.

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

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

Note
Rectangle 27 0

javascript HTML radio buttons: hide bullets?


<label>
    <input type="radio" name="foo">
    <img src="...">
</label>
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.

I have then applied the following styles:

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.

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

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

Note
Rectangle 27 0

javascript HTML radio buttons: hide bullets?


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

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

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.

Note
Rectangle 27 0

javascript HTML radio buttons: hide bullets?


1) Program this using javascript / jquery. With that in mind I would suggest you use radio buttons as a starting placeholder, and then use javascript (ideally via a jquery plugin) which will redraw the page and replace the buttons with clickable divs and a dynamically changing hidden field value.

2) Use the CSS meta class of :checked which unfortunately doesn't appear to have cross browser support.

If I understand this correctly, you want radio buttons but you don't want the buttons themselves to appear. Keep in mind that just removing the buttons will NOT provide the user experience you are looking for. You need to have some form of user feedback.

You have two options:

Note