HTML radio buttons: hide bullets

StackOverflow https://stackoverflow.com/questions/8868273

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.

Was it helpful?

Solution

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:

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.

OTHER TIPS

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.

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.

$('#js input[type=radio]').hide();

var inputs = document.getElementById('my-form').getElementsByTagName('input');

for (var i = 0, inputsLength = inputs.length;i < inputsLength; i++) {

    var input = inputs[i];

    if (input.getAttribute('type') == 'radio') {
        input.style.display = 'none';
    }

}

Alternatively, if your browser supports it (querySelectorAll in document)...

document.querySelectorAll('#my-form input[type="radio"]').style.display = 'none';

I don't think you can hide it with css. You'd have to hide the radiobuttons and then replace the functionality with JS. maybe a selectable list of LIs would work for you.

From the jQuery UI Selectable : http://jqueryui.com/demos/selectable/

<input type='radio' value='1' name='rad' class='radio'>
<input type='radio' value='2' name='rad' class='radio'>
<input type='radio' value='3' name='rad' class='radio'>

<ol id="selectable" style='display:none'>
    <li class="ui-widget-content">Item 1</li>
    <li class="ui-widget-content">Item 2</li>
    <li class="ui-widget-content">Item 3</li>
</ol>

$(function() {
    $('.radio').hide();
    $( "#selectable" ).show().selectable({
       selected: function(event, ui) {//figure out which was selected and mark the hidden radio button}
    });
});

you can do it by adding this style="list-style:none;"

Just insert: style="display:none;" inside every "<input type='radio'…>" tag.

This makes the bullets invisible, but leaves the labels showing.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top