选择单选按钮时保留其边框效果-PHP中文网问答

我有两个无线电类型选项。当我选择一个选项时，会标记蓝色边框。问题是，如果我点击其他地方，边框效果就会消失。

我希望无论我点击哪里，蓝色边框效果都会保留，除非我切换到其他选项。

另外，我怎样才能将“跨度”中的价格放在右侧，并将产品名称保留在左侧？

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

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

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

.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>