選擇單選按鈕時保留其邊框效果
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 即可。