HTML switches: hide bullets

Question

I want the specific form component to act as radio buttons (only one parameter can be selected at a time). I do not want the radio to show, however, the choice of alternative presentation methods, such as the selected light or any other method. This will allow for competent degradation: if the user's browser does not support Javascript, it simply degrades to the main switches. I want to hide bullet buttons through Javascript or CSS. Does anyone know how? Thank you

Answer 1

If I understand this correctly, you need radio buttons, but you do not want the buttons to appear. Keep in mind that simply removing the buttons will NOT provide the user interface you are looking for. You must have some form of user feedback.

You have two options:

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

2) Use the CSS: checked meta class , which, unfortunately, does not have cross browser support.

Answer 2

I have a simple solution in which I have a shortcut surrounding my radio buttons with an image representing the selected thing:

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

I 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 with img . The radio itself is hidden using opacity:0 . The user can indicate what is selected, since img next to the checked radio will be opaque, while others will be translucent. You can easily make various other effects.

I like the fact that the form remains easy to process, it is a group of switches.

I used opacity for the switches, not display:none or visibility:hidden , since they are still in tabindex and the form remains accessible to the keyboard.

Answer 3

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

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

Using opacity: 0; is not ideal as the button is still there, taking up space on the page. This is not true.

Answer 4

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

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

Answer 6

I don't think you can hide it with css. You will have to hide the radio buttons and then replace the JS functionality. maybe the selected LI list will work for you.

From jQuery Selectable UI: 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} }); }); 

Answer 7

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

Answer 8

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

This makes the bullets invisible, but leaves shortcuts.