印刷可能な政府フォームのチェックボックスとして HTML ラジオ ボタンのスタイルを設定するにはどうすればよいですか?

政府機関フォームのチェックボックスに似た HTML ラジオ ボタンのスタイル設定

オリジナルによく似た政府機関フォームを作成するには、は、印刷用のチェックボックスに似た電子版のラジオ ボタンのスタイルを設定するために必要です。従来のアプローチでは、個別のチェックボックスを作成して各ラジオ ボタンをシャドウし、その機能を同期する必要がありましたが、より効率的な方法が存在します。

最新の CSS3 の外観プロパティを使用すると、ラジオ ボタンの外観を模倣するように変更できます。チェックボックス。この方法は、Firefox、Chrome、Safari、Opera などの一般的なブラウザでサポートされています。 -webkit-Appearance プロパティと -moz-Appearance プロパティを「checkbox」に設定すると、これらのブラウザでは正方形のチェックボックス スタイルのラジオ ボタンが表示されます。

コード スニペットの例を次に示します。

input[type="radio"] {
  -webkit-appearance: checkbox; /* Chrome, Safari, Opera */
  -moz-appearance: checkbox;    /* Firefox */
  -ms-appearance: checkbox;     /* not currently supported */
}

<label><input type="radio" name="radio"> Checkbox 1</label>
<label><input type="radio" name="radio"> Checkbox 2</label>

このソリューションは、ラジオ ボタンをチェックボックスのような要素に効果的に変換し、印刷フォームの視覚的な精度を向上させ、画面上のラジオ ボタンの使いやすさを維持します。画面。

以上が印刷可能な政府フォームのチェックボックスとして HTML ラジオ ボタンのスタイルを設定するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。