web-dev-qa-db-fra.com

Masquer le bouton radio cocher avec css

J'aimerais savoir s'il est possible de masquer le bouton radio coché avec css en utilisant:

  { display:none; }

Je ne sais pas comment aborder cet élément. Le bouton radio coché affiche toujours "none" ce qui ne veut rien dire à l'utilisateur et je souhaite le cacher . Est-ce possible? Merci pour tout pointeur.

cssradio-button
14
user1977156

Un petit conseil, si vous souhaitez toujours utiliser tout le support natif du navigateur pour les radios et les cases à cocher, comme pour vous déplacer entre elles avec les touches ↑ et, réglez le css sur position:fixed;opacity:0, cela conservera toutes les fonctionnalités mais gardera les entrées masquées ne prendra aucun espace de mise en page. J'ai passé les 3 dernières heures à comprendre cela, mais ça marche!

18
Joe H

Complément à 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)

plus d'infos: https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

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

14
lijn

Essayez visibility:hidden; Cela fonctionnera.

Voici la DEMO DE TRAVAIL

Le HTML:

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

Le CSS:

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

J'espère que c'est ce que vous recherchez.

6
Nitesh

Si vous voulez masquer une case à cocher/radio plusieurs fois, il faut créer une case à cocher/radio personnalisée.

Si vous voulez pouvoir vous concentrer sur l'étiquette pour l'entrée, utilisez l'opacité: 0; position: absolue; largeur: 0; ce qui rend l'entrée invisible sans prendre de place.

Si vous utilisez display: none; ou visibilité: caché; cela aura un effet similaire, mais les navigateurs les plus utilisés actuels (MSIE11, Edge, Chrome 60.0.3112.101, Firefox 55) ne permettront pas de focaliser l'élément à l'aide du clavier, ce 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>

Démo: https://jsfiddle.net/Lmt4zrvn/

4
Gerben Versluis

Essayez d’utiliser le sélecteur :checked:

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

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

1
Arbaoui Mehdi

Si vous avez utilisé {display: none;} et que vous voyez toujours un espace (comme 3px ou plus), il est probable que vous ayez des espaces ou des lignes nouvelles entre les éléments de votre code HTML qui peuvent parfois amener le moteur de rendu des pixels entre ces éléments.

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

  1. Soit, supprimez cet espace blanc entre vos balises dans votre code HTML. (Malheureusement, cela rend votre html plus compliqué, alors la deuxième option peut être meilleure.)

  2. Ou, dans votre css, définissez la taille de la police dans le conteneur parent sur 0px. ex: #parent{font-size:0px;}, puis initialisez-le à 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>

1
Damian Green