선택 시 라디오 버튼의 테두리 효과 유지
<p>두 가지 라디오 유형 옵션이 있습니다. 옵션을 선택하면 파란색 테두리가 표시됩니다. 문제는 다른 곳을 클릭하면 테두리 효과가 사라진다는 것입니다. </p>
<p>다른 옵션으로 전환하지 않는 한 클릭할 때마다 파란색 테두리 효과가 유지되도록 하고 싶습니다. </p>
<p>그리고 오른쪽 '스팬'에는 가격을 넣고 왼쪽에는 제품명을 유지하려면 어떻게 해야 하나요? </p>
<p>
<pre class="brush:css;toolbar:false;">.checkbox-custom,
.radio-맞춤형 {
불투명도: 0;
위치: 절대;
}
.checkbox-맞춤형,
.checkbox-맞춤 라벨,
.radio-맞춤형,
.radio-맞춤 라벨 {
디스플레이: 인라인 블록;
수직 정렬: 중간;
여백: 5px;
커서: 포인터;
}
.checkbox-맞춤 라벨,
.radio-맞춤 라벨 {
위치: 상대;
}
.checkbox-custom + .checkbox-custom-label:이전,
.radio-custom + .radio-custom-label:이전 {
콘텐츠: '';
배경: #fff;
테두리: 2px 솔리드 #000;
디스플레이: 인라인 블록;
수직 정렬: 중간;
너비: 20px;
높이: 20px;
패딩: 2px;
오른쪽 여백: 10px;
텍스트 정렬: 중앙;
}
.checkbox-custom:checked + .checkbox-custom-label:이전 {
배경: 레베카퍼플;
상자 그림자: 삽입 0px 0px 0px 4px #fff;
}
.radio-custom + .radio-custom-label:이전 {
테두리 반경: 50%;
여백: 10px;
}
.radio-custom:checked + .radio-custom-label:before {
배경: #000;
상자 그림자: 삽입 0px 0px 0px 4px #fff;
}
.checkbox-custom:focus + .checkbox-custom-label,
.radio-custom:focus + .radio-custom-label {
개요: 1px 단색 파란색;
너비: 50%;
}
.radio-맞춤 라벨 {
배경: #f4f4f4;
너비: 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">
제품A
$100
</라벨>
</div>
<div>
<input id="pB" value="{{ pago_cuotas }}" class="radio-custom" name="radio-group" type="radio">
<label for="pB" class="radio-custom-label">
제품B
$200
</라벨>
</p>
