Comme le titre indiqué ci-dessus, je me demande simplement s'il est possible d'activer une balise de sélection uniquement après avoir coché le bouton radio en utilisant uniquement HTML et CSS?

Par exemple: après avoir sélectionné le bouton radio, je pourrai accéder et cliquer sur la case de sélection. select + bouton radio

0
suppko 27 janv. 2019 à 17:40

3 réponses

Meilleure réponse

Vous ne pouvez pas désactiver sans Javascript, mais vous pouvez certainement le cacher / l'afficher en utilisant HTML, CSS.

Voici l'exemple:

HTML

 <input type="radio" name="1" id="radio">
    <select name="" id="select">
    <option value="">Select</option>
  </select>

CSS

#select{
      display: none;
    }
    #radio:checked ~ #select{
      display: inline;
    }
1
Thanveer Shah 27 janv. 2019 à 14:57

Avec Pure CSS ou HTML, ce n'est pas possible, vous ne pourriez être en mesure de définir l'affichage de votre sélection sur aucun et de l'afficher lorsque le bouton radio obtient le focus, sinon vous devez le faire avec JS, également pour éviter de s'afficher par erreur en survolant une autre radio boutons, vous devez attribuer un identifiant unique au bouton radio et sélectionner.

1
Erfan Mola 27 janv. 2019 à 15:00

Deuxième solution

Comme la désactivation n'est pas possible sans JavaScript, vous pouvez utiliser cette petite astuce qui agira comme une propriété désactivée: pointer-events: none;

Même si je ne le recommande pas, mais c'est toujours un bon hack

HTML

<input type="radio" name="1" id="radio">
    <select name="" id="select">
    <option value="">Select</option>
  </select>

CSS

   #select{
      pointer-events: none;
    }
    #radio:checked ~ #select{
      pointer-events: all;
    }
1
Thanveer Shah 27 janv. 2019 à 15:08