Hide check bouton radio avec css

juste un petit conseil, si vous voulez toujours utiliser tout le support natif du navigateur pour les radios et les cases à cocher, comme se déplacer entre eux avec ↑ et ↓ touches, mettez le css à position:fixed;opacity:0, cela gardera toutes les fonctionnalités mais gardera l'entrée cachée, et ne prendra pas d'espace de mise en page. J'ai passé les 3 dernières heures de déterminer cela, mais il fonctionne!

en plus de la réponse de Nathan Lee

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

est une option pour spécifier un bouton radio coché

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

est une option pour spécifier un bouton radio coché avec une valeur égale à 'text' ('none' dans votre exemple)

si la valeur n'est pas savoir, certains jQuery peut faire l'affaire: http://api.jquery.com/attribute-equals-selector/

visibility:hidden; ça va marcher.

Ici DÉMO DE TRAVAIL

the HTML:

<input class="checked" type="radio" checked />

The CSS:

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

j'espère que c'est ce que vous cherchez.

si vous voulez cacher une case à cocher/radio plusieurs fois, c'est pour faire une case à cocher/radio personnalisée. Si vous voulez pouvoir vous concentrer sur l'étiquette pour l'entrée, utilisez visibilité:cachée; position:absolue; largeur:0; ce qui rend l'entrée invisible sans occuper d'espace. Si vous utilisez display: none; ou visibility: hidden; il aura le même effet mais les navigateurs les plus utilisés actuellement (Msie11, Edge, Chrome 60.0.3112.101, Firefox 55) ne permettra pas de mettre l'élément au point en utilisant le clavier qui le rend moins 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>

Essayez d'utiliser :checked sélecteur:

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

Démo: http://jsfiddle.net/RkzG5/

si vous avez utilisé {display: none;} et que vous voyez encore un espace (comme 3px ou Ainsi), alors il est probable que vous ayez des espaces ou de nouvelles lignes entre les éléments de votre html qui peuvent parfois amener le renderer à afficher quelques pixels entre ces éléments.

ceci est en effet problématique et peut être très difficile à identifier comme le problème sans cette connaissance, mais une fois que vous savez, vous avez deux solutions faciles:

1. soit supprimer cet espace blanc entre vos balises dans votre html. (Malheureusement, cela rend votre html plus messier, de sorte que la deuxième option peut être meilleure.)

2. Ou, dans votre css, définir la taille de police dans le conteneur parent à 0px. ex:#parent{font-size:0px;} puis l'initialiser à nouveau pour tous les enfants du parent avec #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>