Pure CSS3はラジオボタンを美しく化します

クズども · 掲載地 2019/05/16 11:10:41

この純粋なCSS3によるラジオボタンの美化方法は、以下の状況でうまく機能します。

1. IE9以上と互換性があり、IE8と互換性が必要な場合は、スタイルを削除するためにIEのハックを書く

2. ラジオボタン選択スタイルの円はCSSで作成可能ですが、チェックボタンのチェックボックスは画像またはアイコンフォントライブラリが必要です

3. スイッチング効果をサポートするためにJSは不要

下の画像は最終レンダリングです:

HTMLコード:

ログインが見えます。

CSSコード:

ログインが見えます。

この方法で最も重要なのは、エフェクトのクラス名を選択することです:.radio input:checked + span.radio-on

+ は CSS2 の擬似類であり、div+p はの<div>直後に直後のすべての要素を選択します<p>。

つまり、選択した入力(:checked)を見つけ、Radio-onというスパン要素を使って選択された円の効果を表現します。

インターネット上にはラベルを円形にする美化方法がたくさんありますが、この場合、単一の選択テキストをラベルの外側に置く必要があり、そのためテキストをクリックすると単一選択効果を切り替えることができません。

そこで、ラベルにradio-bgというスパンを追加して後ろの大きな円を作り、さらにradio-onというスパンでセレクションの前にある小さな円を作りました。

この方法により、ラベル内のテキストが保持され、単一選択の効果も切り替えられます。

添付:jQueryは選択した無線機の値法を取る

VAR val=$('input:radio[name="sex"]:checked').val();

3つの方法すべてを添付してください:

$('input:radio:checked').val();

$("input[type='radio']:checked).val();

$("input[name='rd']:checked)」).val();

[CSS/DIV] Pure CSS3はラジオボタンを美しく化します

関連記事

閲覧したセクション