Préserver l'effet de bordure du bouton radio lorsqu'il est sélectionné

Question

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 % ;
}</pré>
<pre class="brush:html;toolbar:false;"><div>
  <input id="pA" value="{{ pago_normal }}" class="radio-custom" name="radio-group" type="radio">
  <label for="pA" class="radio-custom-label">
    ProduitA <span> 100 $</span>
  </étiquette>
</div>
<div>
  <input id="pB" value="{{ pago_cuotas }}" class="radio-custom" name="radio-group" type="radio">
  <label for="pB" class="radio-custom-label">
    ProduitB <span> 200 $</span>
  </étiquette>
</div>

Answer 1

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

.checkbox-custom, .radio-custom {
        opacity: 0;
        position: absolute;   
        }
        .checkbox-custom, .checkbox-custom-label, .radio-custom, .radio-custom-label {
        display: inline-block;
        vertical-align: middle;
        margin: 5px;
        cursor: pointer;
        }
        .checkbox-custom-label, .radio-custom-label {
        position: relative;
          display: flex;
          align-items: center;
          padding-right: 10px;
        }
.checkbox-custom-label span, .radio-custom-label span{
  margin-left: auto;
}
        .checkbox-custom + .checkbox-custom-label:before, .radio-custom + .radio-custom-label:before {
        content: '';
        background: #fff;
        border: 2px solid #000;
        display: inline-block;
        vertical-align: middle;
        width: 20px;
        height: 20px;
        padding: 2px;
        margin-right: 10px;
        text-align: center;
        }
        .checkbox-custom:checked + .checkbox-custom-label:before {
        background: rebeccapurple;
        box-shadow: inset 0px 0px 0px 4px #fff;
        }
        .radio-custom + .radio-custom-label:before {
        border-radius: 50%;
        margin: 10px;
        }
        .radio-custom:checked + .radio-custom-label:before {
        background: #000;
        box-shadow: inset 0px 0px 0px 4px #fff;
        }
        .checkbox-custom:focus + .checkbox-custom-label, .radio-custom:focus + .radio-custom-label {
        /*         outline: 1px solid blue; */
/*         width:50%; */
        }
        .radio-custom-label{
        background: #f4f4f4;
/*         width: 50%; */
        }
        .radio-custom:checked + .radio-custom-label{
          outline: 1px solid blue;
        }
    </style>

 <div>
    <input id="pA" value="{{ pago_normal  }}" class="radio-custom" name="radio-group" type="radio">
    <label for="pA" class="radio-custom-label">ProductA
    <span>0</span>
    </label>
</div>
<div>
    <input id="pB" value="{{ pago_cuotas }}" class="radio-custom" name="radio-group" type="radio">
    <label for="pB" class="radio-custom-label">ProductB
    <span>0</span>
    </label>
</div>