Preserve border effect of radio button when selected
P粉769045426
2023-09-03 21:25:38
<p>I have two radio type options. When I select an option, a blue border is marked. The problem is, if I click somewhere else, the border effect disappears. </p>
<p>I want the blue border effect to remain wherever I click unless I switch to another option. </p>
<p>Also, how can I put the price in the "span" on the right and keep the product name on the left? </p>
<p>
<pre class="brush:css;toolbar:false;">.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%;
}</pre>
<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">
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></pre>
</p>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
You already put the code for the blue border into :focus of the radio button, you just need to add that code to :checked of the radio button.
.radio-custom:checked + .radio-custom-label{ outline: 1px solid blue; }