Behalten Sie den Randeffekt des Optionsfelds bei, wenn es ausgewählt ist

Question

Ich habe zwei Funktypoptionen. Wenn ich eine Option auswähle, wird ein blauer Rand markiert. Das Problem ist, dass der Randeffekt verschwindet, wenn ich irgendwo anders klicke.

Ich möchte, dass der blaue Randeffekt überall dort erhalten bleibt, wo ich klicke, es sei denn, ich wechsle zu einer anderen Option.

Außerdem, wie kann ich den Preis in der „Spanne“ auf der rechten Seite eingeben und den Produktnamen auf der linken Seite behalten?

.checkbox-custom,
.radio-custom {
    Deckkraft: 0;
    Position: absolut;
}

.checkbox-custom,
.checkbox-custom-label,
.radio-custom,
.radio-custom-label {
    Anzeige: Inline-Block;
    vertikal ausrichten: Mitte;
    Rand: 5px;
    Cursor: Zeiger;
}

.checkbox-custom-label,
.radio-custom-label {
    Position: relativ;
}

.checkbox-custom + .checkbox-custom-label:before,
.radio-custom + .radio-custom-label:before {
    Inhalt: '';
    Hintergrund: #fff;
    Rand: 2px fest #000;
    Anzeige: Inline-Block;
    vertikal ausrichten: Mitte;
    Breite: 20px;
    Höhe: 20px;
    Polsterung: 2px;
    Rand rechts: 10px;
    Textausrichtung: Mitte;
}

.checkbox-custom:checked + .checkbox-custom-label:before {
    Hintergrund: Rebeccapurple;
    Box-Shadow: Einschub 0px 0px 0px 4px #fff;
}

.radio-custom + .radio-custom-label:before {
    Randradius: 50 %;
    Rand: 10px;
}

.radio-custom:checked + .radio-custom-label:before {
    Hintergrund: #000;
    Box-Shadow: Einschub 0px 0px 0px 4px #fff;
}

.checkbox-custom:focus + .checkbox-custom-label,
.radio-custom:focus + .radio-custom-label {
    Umriss: 1 Pixel durchgehend blau;
    Breite: 50 %;
}

.radio-custom-label {
    Hintergrund: #f4f4f4;
    Breite: 50 %;
}

<div>
  <input id="pA" value="{{ pago_normal }}" class="radio-custom" name="radio-group" type="radio">
  <label for="pA" class="radio-custom-label">
    ProduktA <span>$100</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">
    ProduktB <span>$200</span>
  </label>
</div>

Answer 1

您已将蓝色边框的代码放入单选按钮的 :focus 中，您只需将该代码添加到单选按钮的 :checked 中即可。

.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>$100</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>$200</span>
    </label>
</div>