<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 </라벨>