Hide check radio button with css

Question

I would like to know if it is possible to hide the checked radio button with css by using:

  { display:none; }

I don\'t know how to address

Answer 1

In addition to issues mentioned in other answers (in particular the accessibility issue), a caveat for display: none is that it will also affect the warning displayed by the browser when the radio input is required and the user didn't check it.

On the other hand, a caveat for opacity: 0 and for visibility: hidden is that it the radio button will still use some space (and AFAICS width: 0px has no effect), which may be an issue (e.g. for alignment, or if your radio buttons are inside <li> tags and you want the <li> background color to change on :hover, in which case the label has to cover the <li>).

A fix is to simply set the position of the radio button as fixed :

input[type=radio] {
    opacity: 10;
    position: fixed;
}

input[type=radio]+label {
    background-color: #eee;
    padding: 1em;
}

<input type="radio" id="radio1">
   <label for="radio1">radio1</label>

<input type="radio" id="radio2">
   <label for="radio2">radio2</label>

As seen in the snippet (using opacity: 10 instead of 0 just to see what we're talking about), with position: fixed the radio button doesn't affect the label anymore.

Answer 2

Additional to Nathan Lee answer

input[type="radio"]:checked{
    visibility:hidden;
}

is an option to specify a checked radio button

input[type="radio"][value="text"]:checked{
    visibility:hidden;
}

is an option to specify a checked radio button with a value that equals 'text' ('none' in your example)

more info: https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

if the value is not know, some jQuery can do the trick: http://api.jquery.com/attribute-equals-selector/

Answer 3

If you have used {display:none;} and you still see a space (like 3px or so), then it is likely that you have spaces or new-lines between the elements in your html that can sometimes cause the renderer to display some pixles between those elements.

This is indeed problematic and can be very difficult to identify as the problem without this knowledge, but once you know, you have two easy solutions:

1. Either, remove that white space between your tags in your html. (Unfortunately, that makes your html messier, so the second option may be better.)

2. Or, in your css, set the font-size in the parent container to 0px. ex: #parent{font-size:0px;} and then initialize it again for all the children of the parent with #parent *{font-size:initial;}.

#parent{
  font-size:0px;
  display:block;
}
#parent *{
  font-size:initial;
}
.tab-label {
  display:inline-block;
  background: #eee; 
  border: 1px solid; 
}
[name="tab-group-1"] {
  display: none;  
}

<div id="parent">
    
       <input type="radio" id="tab-1" name="tab-group-1" checked>
       <label class="tab-label" for="tab-1">Tab One</label>
       <input type="radio" id="tab-2" name="tab-group-1">
       <label class="tab-label" for="tab-2">Tab Two</label>
       <input type="radio" id="tab-3" name="tab-group-1">
       <label class="tab-label" for="tab-3">Tab Three</label>
 </div> 

Answer 4

Just a little tip:

If you still want to use all the browser's native support for radios and check boxes, like moving between them with ↑ and ↓ keys, set the css to:

position: fixed;
opacity: 0;
pointer-events: none;

This will keep all functionality but keep the input hidden, and won't take up any layout space.
I've spent the last 3 hours figuring this out, but it does work!

Answer 5

If you want to hide a checkbox/radio many times it is to make a custom checkbox/radio.

If you want to be able to focus on the label for the input use opacity: 0; position:absolute; width:0; which makes the input invisible without taking up space.

If you use display:none; or visibility:hidden; it will have a similar effect but the current most used browsers (MSIE11, Edge, Chrome 60.0.3112.101, Firefox 55) won't allow to focus the element by using the keyboard which makes it less accessible.

.opacity {
	position: absolute;
	opacity: 0;
	width: 0;		/* for internet explorer */
}

.visibility {
	visibility: hidden;
}

.nodisplay {
	display: none;
}

input[type=checkbox]+label {
	font-weight: normal;
}
input[type=checkbox]:checked+label {
	font-weight: bold;
}
input[type=checkbox]:focus+label {
	border: 1px dotted #000;
}

<p>
	<input type="button" value="Click this button and press tab to change focus">
</p>
<div>
   <input class="opacity" type="checkbox" id="checkbox1">
   <label for="checkbox1">Press space to (un)check</label>
</div>
<div>
   <input class="opacity" type="checkbox" id="checkbox2">
   <label for="checkbox2">Press space to (un)check</label>
</div>
<div>
   <input class="visibility" type="checkbox" id="checkbox3">
   <label for="checkbox3">Press space to (un)check</label>
</div>
<div>
   <input class="visibility" type="checkbox" id="checkbox4">
   <label for="checkbox4">Press space to (un)check</label>
</div>
<div>
   <input class="nodisplay" type="checkbox" id="checkbox5">
   <label for="checkbox5">Press space to (un)check</label>
</div>
<div>
   <input class="nodisplay" type="checkbox" id="checkbox6">
   <label for="checkbox6">Press space to (un)check</label>
</div>

Demo: https://jsfiddle.net/Lmt4zrvn/

Answer 6

Try using :checked selector:

input[type="radio"]:checked {
    display: none;
}

Demo: http://jsfiddle.net/RkzG5/