34

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.

1
  • 1
    what is wrong with input[type="radio"]:checked{display:none;} ?? It should hide it that way. Don't know why you'd want to hide it though
    – Danield
    Aug 6, 2013 at 11:38

9 Answers 9

67

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!

7
  • 5
    This is the best answer, because it doesn't affect accessibility users, or keyboard navigation.
    – Arjun
    Apr 6, 2017 at 11:28
  • 2
    I thought that the following fiddle might be a useful example regarding this answer
    – Dave F
    Nov 24, 2018 at 23:55
  • This doesn't really work, unfortunately. With Up/Down there's a "trap" in FF & IE where the focus disappears, and the cycling is broken. See: stackoverflow.com/questions/54293720/…
    – gene b.
    Jan 27, 2019 at 22:13
  • My experience: position: fixed caused brief unresponsibility and weird layout jumps on Chrome for Android. position: absolute and width: 0 seems to work better (you have to assign position: relative to inputs parent, obviously).
    – HynekS
    Sep 27, 2020 at 9:34
  • Thank you! I tried so many things, found this answer at last, and it worked like a charm! I tried this with FF, Chrome, and Opera and it worked with all of them.
    – Jay Patel
    Oct 15, 2020 at 14:01
21

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/

7
  • Thanks, this is exactly what I needed, however, I noticed a further problem, which I didn't take into account. Please have a look at this page (marsden.webresponsive.co.uk/index.php/digi-di-162ss.html). I only want to hide the checked button where the text is "None", otherwise when I check the other options the other radio buttons are hidden and I don't want this. How can I do this?
    – bertassa
    Aug 6, 2013 at 12:25
  • @user1977156 Do you mean if the value is none? => input[type="radio"][value="text"]:checked I'm not sure where to see a radio button at your page, there doesn't seem to be one in the source code..
    – lijn
    Aug 6, 2013 at 14:43
  • Sorry perhaps it was not clear. I mean that the first radio input by default is always checked and the text is always equal to "None". I want to hide only that radio input whose text is equal to "None".
    – bertassa
    Aug 6, 2013 at 14:58
  • So you can use input[value="none"] ? More info: CSS selector: [attr=value] developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors | Sorry but I don't understand: Is "text" the value or the label, what is the relation between "text" and the radio button?
    – lijn
    Aug 6, 2013 at 15:09
  • I try again. I need to hide the checked radio input as well as the text only when the content is equal to "None" as in the example on page link. With this input[type="radio"]:checked I hide any checked radio button, but I only want to hide the checked on when the text is equal to "None"
    – bertassa
    Aug 6, 2013 at 15:39
13

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/

6

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.

2
  • 1
    This is not the best approach if you consider keyboard navigation and accessibility. I found Gerben Versluis's answer to be spot on.
    – MkMan
    Feb 12, 2020 at 22:53
  • How to hide the radio button and move its label right its first pixel position? I see the radio button hidden and yet it leaves a blank space in there. May 15, 2021 at 3:01
2

Try using :checked selector:

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

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

1

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> 

1

(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;
  };
1

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.

1
  • Thank you! I've struggled quite a while with this and your answer is exactly what I was looking for.
    – Matthew
    Mar 10 at 15:27
0

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.

1
  • 1
    Damn, just figured this is exactly what the most voted answer was already about… >< I won't delete it anyway, because it would have been more helpful to me presented this way. Jun 26, 2019 at 14:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.