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.

Intercollegiate

+1 to make "671" out of your current "666" :) – Odellodella

Answer 1

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.

Proprietress

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.

Orchidaceous

the idea to use opacity is brilliant! – Fetter

Answer 3

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.

Forbade

This would not hide, but move them and cause viewport to overflow (and likely scroll). – Lindly

@Lindly That's interesting, I've used this for years and I've never gotten a scrollbar. You're also the first person to point this out, do you have an example that I can use to reproduce your issue? Because I can't seem to. – Forbade

Claim of what? That using hacks to achieve desired results is subpar to actual documented solution? You have display:none, visibility:hidden and a number of other CSS rules to achieve desired results, but moving element outside viewport was never the correct solution to hiding it. – Lindly

@Lindly I asked a question and you haven't answered it at all. My solution is perfectly valid. – Forbade

Answer 4

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

Keep

That would be great if the OP used jQuery, but they never mentioned it. – Randy

Come on - it's reasonable to assume at least a reading familiarity with jQuery in this context. – Nunnally

Answer 5

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';

Randy

Answer 6

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}
    });
});

Inept

You can hide it with CSS. Simple rule of label input[type="radio"] { display: none; } (for example) would affect the appearance of buttons but retain labels in view. See comment above about using opacity: 0 for the purposes of improved accessibility. – Lindly

Answer 7

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

Wilhelm

That only can be added on ul/li tags. – Maryrosemarys

Answer 8

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

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

Mcintire

this would prevent graceful degradation in case of disabled JavaScript, since bullets would still be hidden. Setting display to none per JavaScript would be an option. P.S. downvote was not from me. – Odellodella