选择单选按钮时保留其边框效果
P粉769045426
2023-09-03 21:25:38
<p>我有两个无线电类型选项。当我选择一个选项时，会标记蓝色边框。问题是，如果我点击其他地方，边框效果就会消失。</p>
<p>我希望无论我点击哪里，蓝色边框效果都会保留，除非我切换到其他选项。</p>
<p>另外，我怎样才能将“跨度”中的价格放在右侧，并将产品名称保留在左侧？</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>
您已将蓝色边框的代码放入单选按钮的 :focus 中，您只需将该代码添加到单选按钮的 :checked 中即可。
.radio-custom:checked + .radio-custom-label{ outline: 1px solid blue; }