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.

+1 to make "671" out of your current "666" :) – Alex Shesterov Apr 19 '13 at 22:26 — Alex Shesterov, Apr 19 '13 at 22:26

score 5 · Answer 1 · answered Dec 05 '12 at 02:45

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.

the idea to use opacity is brilliant! – Andrey Nov 03 '15 at 21:30 — Andrey, Nov 03 '15 at 21:30

score 4 · Answer 2 · answered Apr 02 '13 at 15:05

4

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.

answered Apr 02 '13 at 15:05

aross

3,325
3
34
42

1

This would not hide, but move them and cause viewport to overflow (and likely scroll). – AnrDaemon Jan 27 '23 at 13:13
@AnrDaemon 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. – aross Jan 27 '23 at 15:03
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. – AnrDaemon Feb 06 '23 at 11:42
@AnrDaemon I asked a question and you haven't answered it at all. My solution is perfectly valid. – aross Mar 02 '23 at 09:09

score 2 · Answer 3 · answered Mar 02 '11 at 05:32

2

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

answered Mar 02 '11 at 05:32

Brandon Frohbieter

17,563
3
40
62

3

That would be great if the OP used jQuery, but they never mentioned it. – alex Mar 02 '11 at 05:33
Come on - it's reasonable to assume at least a reading familiarity with jQuery in this context. – Dominic Cronin Oct 11 '13 at 09:55

score 2 · Accepted Answer · edited May 23 '17 at 12:17

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.

score 1 · Answer 5 · answered Mar 02 '11 at 05:33

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

score 1 · Answer 6 · answered Mar 02 '11 at 05:36

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 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. — AnrDaemon, Jan 27 '23 at 13:16

score -1 · Answer 7 · edited Apr 19 '13 at 22:18

-1

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

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

edited Apr 19 '13 at 22:18

Alex Shesterov

26,085
12
82
103

answered Apr 19 '13 at 21:52

Mark Choi

61
1
1

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. – Alex Shesterov Apr 19 '13 at 22:16

score -1 · Answer 8 · answered Mar 02 '11 at 05:31

-1

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

answered Mar 02 '11 at 05:31

Steven Hammons

1,774
8
24
33

That only can be added on ul/li tags. – Kalanj Djordje Djordje Sep 18 '14 at 09:03

HTML radio buttons: hide bullets

8 Answers8