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 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.

Lutestring

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 – Stuff

Answer 1

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!

Thebaine

This is the best answer, because it doesn't affect accessibility users, or keyboard navigation. – Sadler

I thought that the following fiddle might be a useful example regarding this answer – Buke

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: #54294220 – Frizzy

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). – Diehard

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. – Hoy

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 like a space in there. – Gondolier

This doesn't really address how to hide the checked radio button though. – Metamathematics

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/

Maniacal

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? – Lutestring

@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.. – Maniacal

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". – Lutestring

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? – Maniacal

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" – Lutestring

I don't see a radio button on your page link, not in the source, not in generated source. I still don't read what the relation between text=none and the radio button is. I suggest you put a test-case on jsfiddle.net. I have completed my answer with additional information. – Maniacal

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 like a space in there. – Gondolier

Answer 3

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/

Quarterdeck

Answer 4

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.

Potassium

This is not the best approach if you consider keyboard navigation and accessibility. I found Gerben Versluis's answer to be spot on. – Extant

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. – Gondolier

Answer 5

Try using :checked selector:

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

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

Hacking

Answer 6

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> 

Illdisposed

Answer 7

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

Annelid

Answer 8

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.

Ceciliacecilio

Thank you! I've struggled quite a while with this and your answer is exactly what I was looking for. – Amye

Answer 9

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.

Trefler

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. – Trefler