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 this element. The checked radio button always displays "none" which does not mean anything to the user and I wish to hide it. Is this possible? Thanks for any pointer.
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!
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/
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>
Try visibility:hidden; This will work.
Here is the WORKING DEMO
The HTML:
<input class="checked" type="radio" checked />
The CSS:
input.checked[type="radio"]{visibility:hidden;}
I hope this is what you are looking for.
Try using :checked selector:
input[type="radio"]:checked {
display: none;
}
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:
Either, remove that white space between your tags in your html. (Unfortunately, that makes your html messier, so the second option may be better.)
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> 
(I'm using google translate)
I like to use 'opacity: 0'.
When you use 'display: none' or 'vibility: hidden', your input radio doesn't work.
try like:
PS: I use 'position: absolute' for not take space in div
input[type="radio"] {
opacity: 0;
position: absolute;
};
For me it wasappearance: none; because I wanted to style the radio with before (outline) and after (marker) elements and could not hide the whole element.
That way the keyboard support and native functionality still worked.
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.
