選択時にラジオ ボタンの境界線効果を保持する
<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>
