Hide Check Radio Button with CSS

Hide radio button while keeping its functionality

Just cover them with another div whose color matched with the background. This will hide the radio buttons and still your radio buttons will work on clicks of their labels. Hope that helps..

hiding/showing a Div based on a Radio button (CSS Only)

Layout

1. Set each radio before a div (fieldset in this demo)

2. On each radio:

   • Assign a unique #id
   • Assign an identical [name]

3. Next make 2 labels with the attribute [for] and set each attribute's value to an #id of a radio. The [for] attribute of the labels are synced to the radio with the same #id so that when the label is clicked so is the radio.

4. Place these labels anywhere you want on the page.

5. To make things easier assign a class that will group alike tags together.

---

Style

1. Hide the radios and the div that sits after each radio by setting display:none

2. Make the following ruleset (remember step 5 of Layout)

    .radio:checked + .classOfDiv { display:block }
   

   CSS rulesets are read backwards by the browser:
   Any element that has the className of .classOfDiv that has a sibling element that is placed before (in code it's more like above or to the left) it and that sibling (older brother?) has the className of .radio and happens to be checked as well...set that .classOfDiv display property to block.

   The + is called an Adjacent Sibling Combinator which is the key to this ruleset. See the References located after the Demo for more details.

---

Demo

.rad,.set {  display: none;  opacity: 0;}
.rad:checked+.set {  display: block;  opacity: 1;}
.btn {  display: inline-block;  border: 2px inset grey;  border-radius: 6px;  padding: 2px 3px;  cursor: pointer}
.btn:hover {  border-color: tomato;  color: tomato;  transition: .75s ease;}
legend {  font-size: 1.5em}

<form id='main'>  <fieldset>    <legend>SWITCH</legend>    <label for='rad0' class='btn'>OPEN SET 0</label>    <label for='rad1' class='btn'>OPEN SET 1</label>  </fieldset>
  <input id='rad0' class='rad' name='rad' type='radio'>
  <fieldset class='set'>    <legend>SET 0</legend>  </fieldset>
  <input id='rad1' class='rad' name='rad' type='radio'>
  <fieldset class='set'>    <legend>SET 1</legend>  </fieldset></form>

Pure CSS hide/show with radio button: a parent/descendant problem?

When you put the input inside a label element you change the level which it resides, so the tilde(~) selector does not work. If you really need the input to be inside a label element you need to use js.

Pure CSS Radio Buttons show / hide a separate DIV layer

I switched from radio input to checkbox input with a switch type slider. The CSS looks like this:

/* Hide expandable content by default */ 
.grid-quote-full-hidden { 
display: none; 
} 

/* Show hidden content when the checkbox is checked */ 
#expand:checked ~ * .grid-quote-full-hidden {
display: inline-block;
width: 100%; } 

The HTML looks like this:

 <div class="onoffswitch">
   <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="expand"> 
 <label class="onoffswitch-label" for="expand">
   <span class="onoffswitch-inner" ></span> 
   <span class="onoffswitch-switch" ></span> 
 </label> 

<table> <tbody> 
<tr class="grid-quote-full-hidden"><td> 

<div><label for="Who">Name of previous Sales Rep? <span class="french">| Nom du 
représentant commercial précédent?</span></label> <input id="Who" name="Who" 
type="text" class="text-field-quote" value="" placeholder="Name" />
</div> 

</td></tr> 
</tbody>
</table>
</div>

You can customize your own slider style button from the following website: https://proto.io/freebies/onoff/

I am using CSS to hide radio buttons, but I would like to display them on one page using Javascript

No need to add the jQuery library. Qualtrics uses prototype.js and you can use that. Just add the following JavaScript to the first question on your page:

Qualtrics.SurveyEngine.addOnload(function() {
    $$('input[type=radio]').each(function(obj) {
        obj.style.visibility = 'visible';
    });
});

The code finds all the radio radio buttons on the page and changes them to visible.

---

Related Topics