ユーザーが記入して印刷する HTML フォームがあります。印刷されたフォームは政府機関にファックスまたは郵送されますが、政府官僚が複製だと気付かないように、その機関が発行した元のフォームと十分に似ている必要があります。フォームに入力されたデータはどこにも保存されず、Web サーバーに送信されることもありません。重要なのは、ユーザーがイントラネット サイトでこれらのフォームを簡単に見つけて、通常のキーボードで入力して印刷できることです。
画面上では、ラジオ ボタンをそのままにして、ラジオ ボタンの使用法 (1 つのオプションのみを選択) を強制して伝えたいのですが、印刷するときには、丸いラジオ ボタン スタイルではなく、四角いチェックボックス スタイルで印刷する必要があります。メディア セレクターを使用して印刷専用のスタイルを設定する方法はわかっているので、これは問題ではありません。問題は、ラジオ ボタンを希望どおりにスタイル設定できるかどうかがまったくわからないことです。
これがうまくいかない場合は、各ラジオ ボタンを影で隠すチェックボックスを作成し、JavaScript を使用してチェックボックスとラジオ ボタンを同期させ、CSS を使用して適切な媒体で必要なボタンを表示する必要があります。明らかに、スタイルを設定できれば、作業が大幅に削減されます。
ベストアンサー1
この質問が投稿されてから3年が経ち、これはほぼ手の届くところにあります。実際、Firefox 1+、Chrome 1+、Safari 3+、Opera 15+では、
CSS3
appearance財産。
結果はチェックボックスのように見えるラジオ要素になります。
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>注記：これは、ベンダーからのサポートと準拠が不足していたため、最終的に CSS3 仕様から削除されました。Webkit または Gecko ベースのブラウザーのみをサポートする必要がある場合を除き、実装しないことをお勧めします。