css3 を使用して入力の単一選択スタイルと複数選択スタイルを変更する方法

プロジェクト開発では、入力の単一選択と複数選択のスタイルを変更する必要がある状況によく遭遇します。今日は、入力の単一選択と複数選択のスタイルを変更する簡単な方法を紹介します。

その前に簡単に紹介しましょう:before擬似クラス

:before selectorは選択された要素の前にコンテンツを挿入します。 content attribute を使用して、挿入するコンテンツを指定します (content は必須です)。

これは理解するのが難しいことではないと思います。最初にアイデアを理解しましょう:

(1) まず、label を使用して HTML の input 要素のマークを定義します。つまり、ラベル label をクリックすると、対応する input が表示されます。も選択またはキャンセルされます

(2) 次のステップは、入力を非表示にし、画像または自分で描いた円を追加することです。もちろん、背景画像に置き換えることもできます。

input[type="radio"]+label:before是未选中状态的样式

input[type="radio"]:checked+label:before是选中状态的样式

<input type="radio" id="nationality1"><label for="nationality1">中国</label></p>

{:;
}{:;
}{:;:;:;:;:;:;:;:;:;
}{:;:;:;:;:;:;:;:;:;
}

複数の選択を行うには、ラジオをチェックボックスに置き換えます。

注: 非表示と疑似クラスの配置が重要です

以上がcss3 を使用して入力の単一選択スタイルと複数選択スタイルを変更する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。