61

ユーザーが入力して印刷する html フォームがあります。印刷されると、これらのフォームは政府機関にファックスまたは郵送され、政府官僚がこれが複製であることを認識しないように、その機関によって発行された元のフォームに十分に似ている必要があります。フォームに入力されたデータはどこにも保存されず、Web サーバーに送信されることさえありません。重要なのは、ユーザーがイントラネット サイトでこれらのフォームを簡単に見つけて、通常のキーボードで印刷用のフォームに入力できることです。

画面上でラジオボタンをそのままにして、ラジオボタンの使用法を強制して伝えたいと思います（オプションを1つだけ選択してください）。ただし、印刷するときは、丸いラジオ ボタン スタイルではなく、正方形のチェック ボックス スタイルで印刷する必要があります。メディア セレクターを使用して印刷用のスタイルのみを設定する方法を知っているので、それは問題ではありません。ラジオボタンを思い通りにスタイルできるかどうかわからないだけです。

これが機能しない場合は、チェックボックスを作成して各ラジオ ボタンをシャドーし、javascript を使用してチェックボックスとラジオ ボタンを同期させ、css を使用して気になるものを適切な媒体に表示する必要があります。明らかに、スタイルを整えることができれば、多くの作業を節約できます。

4

12 に答える 12

109

この質問が投稿されてから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>
jsfiddle: http://jsfiddle.net/mq8Zq/

注:これは、ベンダーからのサポートと適合性の欠如により、最終的に CSS3 仕様から削除されました。Webkit または Gecko ベースのブラウザーのみをサポートする必要がある場合を除き、実装しないことをお勧めします。

于 2011-11-10T12:25:13.720 に答える
26

これは、CSS (Jsfiddle: http://jsfiddle.net/xykPT/ ) のみを使用した私のソリューションです。

ここに画像の説明を入力

div.options > label > input {
	visibility: hidden;
}

div.options > label {
	display: block;
	margin: 0 0 0 -10px;
	padding: 0 0 20px 0;  
	height: 20px;
	width: 150px;
}

div.options > label > img {
	display: inline-block;
	padding: 0px;
	height:30px;
	width:30px;
	background: none;
}

div.options > label > input:checked +img {  
	background: url(http://cdn1.iconfinder.com/data/icons/onebit/PNG/onebit_34.png);
	background-repeat: no-repeat;
	background-position:center center;
	background-size:30px 30px;
}
<div class="options">
	<label title="item1">
		<input type="radio" name="foo" value="0" /> 
		Item 1
		<img />
	</label>
	<label title="item2">
		<input type="radio" name="foo" value="1" />
		Item 2
		<img />
	</label>   
	<label title="item3">
		<input type="radio" name="foo" value="2" />
		Item 3
		<img />
	</label>
</div>

于 2013-10-09T13:47:56.820 に答える
25

CSS3 では:

input[type=radio] {content:url(mycheckbox.png)}
input[type=radio]:checked {content:url(mycheckbox-checked.png)}

実際には：

<span class=fakecheckbox><input type=radio><img src="checkbox.png" alt=""></span>

@media screen {.fakecheckbox img {display:none}}
@media print {.fakecheckbox input {display:none;}}

<img>また、ラジオを同期させるにはJavascriptが必要です（理想的には、最初にそれらを挿入します）。

<img>ブラウザは通常、印刷しないように設定されているため、私は を使用しましbackground-imageた。画像はインタラクティブではなく、問題を引き起こす可能性が低いため、他のコントロールよりも画像を使用することをお勧めします。

于 2008-11-10T23:06:34.713 に答える
6

アイコンに素晴らしいフォントを使用するようにuser2314737の回答を微調整しました。fa に慣れていない人にとっては、img よりも大きな利点の 1 つは、フォント固有のベクター ベースのレンダリングです。つまり、どのズーム レベルでも画像のジャギーはありません。

jsフィドル

結果

ここに画像の説明を入力

div.checkRadioContainer > label > input {
	visibility: hidden;
}

div.checkRadioContainer {
	max-width: 10em;
}
div.checkRadioContainer > label {
	display: block;
	border: 2px solid grey;
	margin-bottom: -2px;
	cursor: pointer;
}

div.checkRadioContainer > label:hover {
	background-color: AliceBlue;
}

div.checkRadioContainer > label > span {
	display: inline-block;
	vertical-align: top;
	line-height: 2em;
}

div.checkRadioContainer > label > input + i {
	visibility: hidden;
	color: green;
	margin-left: -0.5em;
	margin-right: 0.2em;
}

div.checkRadioContainer > label > input:checked + i {
	visibility: visible;
}
<div class="checkRadioContainer">
	<label>
		<input type="radio" name="radioGroup" />
		<i class="fa fa-check fa-2x"></i>
		<span>Item 1</span>
	</label>
	<label>
		<input type="radio" name="radioGroup" />
		<i class="fa fa-check fa-2x"></i>
		<span>Item 2</span>
	</label>
	<label>
		<input type="radio" name="radioGroup" />
		<i class="fa fa-check fa-2x"></i>
		<span>Item 3</span>
	</label>
</div>

于 2014-09-26T22:48:37.837 に答える
1

外観プロパティは、すべてのブラウザーで機能するとは限りません。次のようにすることができます-

input[type="radio"]{
  display: none;
}
label:before{
  content:url(http://strawberrycambodia.com/book/admin/templates/default/images/icons/16x16/checkbox.gif);
}
input[type="radio"]:checked+label:before{
  content:url(http://www.treatment-abroad.ru/img/admin/icons/16x16/checkbox.gif);
}
 
  <input type="radio" name="gender" id="test1" value="male">
  <label for="test1"> check 1</label>
  <input type="radio" name="gender" value="female" id="test2">
  <label for="test2"> check 2</label>
  <input type="radio" name="gender" value="other" id="test3">
  <label for="test3"> check 3</label>

IE 8+およびその他のブラウザで動作します

于 2016-06-19T15:52:13.100 に答える
0

コントロールをCSSを使用したコントロール以外のもののように見せることはできないと思います。

PRINTボタンを作成して、選択したラジオボタンの代わりにグラフィックを含む新しいページに移動し、そこからwindow.print（）を実行するのが最善の策です。

于 2008-11-10T22:48:08.993 に答える
0

はい、CSS はこれを行うことができます:

input[type=checkbox] {
  display: none;
}
input[type=checkbox] + *:before {
  content: "";
  display: inline-block;
  margin: 0 0.4em;
  /* Make some horizontal space. */
  width: .6em;
  height: .6em;
  border-radius: 0.6em;
  box-shadow: 0px 0px 0px .5px #888
  /* An outer circle. */
  ;
  /* No inner circle. */
  background-color: #ddd;
  /* Inner color. */
}
input[type=checkbox]:checked + *:before {
  box-shadow: 0px 0px 0px .5px #888
  /* An outer circle. */
  , inset 0px 0px 0px .14em #ddd;
  /* An inner circle with above inner color.*/
  background-color: #444;
  /* The dot color */
}
<div>
  <input id="check1" type="checkbox" name="check" value="check1" checked>
  <label for="check1">Fake Checkbox1</label>
</div>
<div>
  <input id="check2" type="checkbox" name="check" value="check2">
  <label for="check2">Fake Checkbox2</label>
</div>
<div>
  <input id="check2" type="radio" name="check" value="radio1" checked>
  <label for="check2">Real Checkbox1</label>
</div>
<div>
  <input id="check2" type="radio" name="check" value="radio2">
  <label for="check2">Real Checkbox2</label>
</div>

于 2015-09-22T02:15:04.147 に答える
-1

だから私は何年もの間スタックに潜んでいました。実はここに投稿するのは初めてです。

とにかく、これは非常識に思えるかもしれませんが、同じ問題に苦しんでいるときにこの投稿に出くわし、汚い解決策を思いつきました. おそらくこれをプロパティ値として設定するよりエレガントな方法があることは知っていますが、

tcpdf.php の 12880-12883 行を見れば:

$fx = ((($w - $this->getAbsFontMeasure($tmpfont['cw'][`110`])) / 2) * $this->k);
$fy = (($w - ((($tmpfont['desc']['Ascent'] - $tmpfont['desc']['Descent']) * $this->FontSizePt / 1000) / $this->k)) * $this->k);
$popt['ap']['n'][$onvalue] = sprintf('q %s BT /F%d %F Tf %F %F Td ('.chr(`110`).') Tj ET Q', $this->TextColor, $tmpfont['i'], $this->FontSizePt, $fx, $fy);
$popt['ap']['n']['Off'] = sprintf('q %s BT /F%d %F Tf %F %F Td ('.chr(`111`).') Tj ET Q', $this->TextColor, $tmpfont['i'], $this->FontSizePt, $fx, $fy);

および行 13135-13138 :

$fx = ((($w - $this->getAbsFontMeasure($tmpfont['cw'][`108`])) / 2) * $this->k);
$fy = (($w - ((($tmpfont['desc']['Ascent'] - $tmpfont['desc']['Descent']) * $this->FontSizePt / 1000) / $this->k)) * $this->k);
$popt['ap']['n']['Yes'] = sprintf('q %s BT /F%d %F Tf %F %F Td ('.chr(`108`).') Tj ET Q', $this->TextColor, $tmpfont['i'], $this->FontSizePt, $fx, $fy);
$popt['ap']['n']['Off'] = sprintf('q %s BT /F%d %F Tf %F %F Td ('.chr(`109`).') Tj ET Q', $this->TextColor, $tmpfont['i'], $this->FontSizePt, $fx, $fy);

これらのウィジェットは、zapfdingbats フォント セットからレンダリングされます...文字コードを交換するだけで、できあがり...チェックはラジオおよび/またはその逆です。これにより、ここで使用するカスタム フォント セットを作成し、フォーム要素に素敵なスタイルを追加するアイデアも生まれます。

とにかく、私は 2 セントを提供しようと考えました...それは私にとって素晴らしいものでした。

于 2020-03-28T22:36:16.170 に答える
-3

テーブルを使用し、Javascript を使用しない非常に単純なアイデア。私は単純すぎますか？

<style type="text/css" media="screen">
#ageBox {display: none;}
</style>

<style type="text/css" media="print">
#ageButton {display: none;}
</style>

<tr><td>Age:</td>

<td id="ageButton">
<input type="radio" name="userAge" value="18-24">18-24
<input type="radio" name="userAge" value="25-34">25-34

<td id="ageBox">
<input type="checkbox">18-24
<input type="checkbox">25-34

</td></tr>
于 2012-05-10T12:10:29.227 に答える