<p>無線タイプのオプションが 2 つあります。オプションを選択すると、青い枠線がマークされます。問題は、別の場所をクリックすると、境界線の効果が消えてしまうということです。 </p> <p>別のオプションに切り替えない限り、どこをクリックしても青い枠線効果を維持したいと考えています。 </p> <p>また、右側の「スパン」に価格を入力し、左側に商品名を残すにはどうすればよいですか? </p> <p> <pre class="brush:css;toolbar:false;">.checkbox-custom, .radio-custom { 不透明度: 0; 位置: 絶対; } .チェックボックスカスタム、 .checkbox-カスタムラベル、 .ラジオカスタム、 .radio-カスタムラベル { 表示: インラインブロック; 垂直配置: 中央; マージン: 5px; カーソル: ポインタ; } .checkbox-カスタムラベル、 .radio-カスタムラベル { 位置: 相対的; } .checkbox-custom .checkbox-custom-label:前、 .radio-custom .radio-custom-label:before { コンテンツ： ''; 背景: #fff; ボーダー: 2px ソリッド #000; 表示: インラインブロック; 垂直配置: 中央; 幅: 20ピクセル; 高さ: 20ピクセル; パディング: 2px; 右マージン: 10px; テキスト整列: 中央; } .checkbox-custom:チェック済み .checkbox-custom-label:before { 背景: レベッカパープル; ボックスシャドウ: インセット 0px 0px 0px 4px #fff; } .radio-custom .radio-custom-label:before { 境界半径: 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 { アウトライン: 1 ピクセルの青一色。 幅: 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 </ラベル> </div></pre> </p>