Having an issue with the radio type options - when selected, a blue border appears but disappears if clicking elsewhere.
Need the blue border effect to stay even when clicked outside, unless switching to the other option.
Looking to align the price in the "span" on the right while keeping the product name on the left.
.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>