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

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

	


   
   Press space to (un)check


   
   Press space to (un)check


   
   Press space to (un)check


   
   Press space to (un)check


   
   Press space to (un)check


   
   Press space to (un)check

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