J'ai deux options de type de radio. Lorsque je sélectionne une option, une bordure bleue est marquée. Le problème est que si je clique ailleurs, l'effet de bordure disparaît.
Je souhaite que l'effet de bordure bleue reste partout où je clique, sauf si je passe à une autre option.
De plus, comment puis-je mettre le prix dans la zone « span » à droite et conserver le nom du produit à gauche ?
.checkbox-custom, .radio-personnalisé { opacité : 0 ; position : absolue ; } .checkbox-custom, .checkbox-étiquette-personnalisée, .radio-custom, .radio-étiquette-personnalisée { affichage : bloc en ligne ; alignement vertical : milieu ; marge : 5px ; curseur : pointeur ; } .checkbox-étiquette-personnalisée, .radio-étiquette-personnalisée { position : relative ; } .checkbox-custom + .checkbox-custom-label:avant, .radio-custom + .radio-custom-label:avant { contenu: ''; arrière-plan : #fff ; bordure : 2px solide #000 ; affichage : bloc en ligne ; alignement vertical : milieu ; largeur : 20 px ; hauteur : 20px ; remplissage : 2 px ; marge droite : 10 px ; alignement du texte : centre ; } .checkbox-custom:checked + .checkbox-custom-label:avant { fond : rebeccapurple ; box-shadow : encart 0px 0px 0px 4px #fff; } .radio-custom + .radio-custom-label:avant { rayon de bordure : 50 % ; marge : 10px ; } .radio-custom:vérifié + .radio-custom-label:avant { arrière-plan : #000 ; box-shadow : encart 0px 0px 0px 4px #fff; } .checkbox-custom:focus + .checkbox-custom-label, .radio-custom:focus + .radio-custom-label { contour : 1px bleu uni ; largeur : 50 % ; } .radio-étiquette-personnalisée { arrière-plan : #f4f4f4 ; largeur : 50 % ; }
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Vous avez déjà mis le code de la bordure bleue dans :focus du bouton radio, il vous suffit d'ajouter ce code dans :checked du bouton radio.
.radio-custom:checked + .radio-custom-label{ outline: 1px solid blue; }