CSS スタイルのラジオ ボタンを印刷用のチェックボックスのように見せることはできますか?

印刷用のチェックボックスのようなラジオ ボタンのスタイル設定

より複雑な JavaScript を使用せずに、印刷目的でラジオ ボタンをチェックボックスに似たスタイルに設定できますか?ベースのソリューション?答えは、CSS3 の外観プロパティを利用することにあります。

この質問の最初の投稿から 3 年が経ち、この偉業は最新のブラウザーでも可能になりました。外観プロパティを利用すると、以下の例に示すように、チェックボックスを視覚的に模倣するラジオ要素を作成できます。

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>

このソリューションは、ラジオ ボタンが次のように表示されるようにするためのシンプルかつ効果的なアプローチを提供します。印刷時にチェックボックスが表示されるため、開発が簡素化されながら、公式フォームのような錯覚が維持されます。

以上がCSS スタイルのラジオ ボタンを印刷用のチェックボックスのように見せることはできますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。