web-dev-qa-db-ja.com

チェックボックスのように見えるようにhtmlラジオボタンをスタイルできますか？

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

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

これが機能しない場合は、各ラジオボタンをシャドーするチェックボックスを作成し、javascriptを使用してチェックボックスとラジオボタンの同期を維持し、cssで適切なメディアに関心のあるものを表示する必要があります。もちろん、スタイルを設定するだけで多くの作業を節約できます。

htmlcssradio-button
54
Joel Coehoorn

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を使用しました。画像は非対話型であり、問​​題を引き起こす可能性が低いため、別のコントロールよりも画像を使用する方が適切です。

25
Kornel

これはCSS（Jsfiddle： http://jsfiddle.net/xykPT/ ）のみを使用する私のソリューションです。

enter image description here

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>
23
user2314737

User2314737の答えを微調整して、アイコンに font awesome を使用します。 faに不慣れな人にとって、imgよりも大きな利点の1つは、フォント固有のベクターベースのレンダリングです。つまりどのズームレベルでも画像がぎざぎざになりません。

jsFiddle

結果

enter image description here

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>
6
Beej

appearanceプロパティはすべてのブラウザで機能しません。次のようにすることができます

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+およびその他のブラウザ

1
Md. Rafee

はい、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>
0
geek-merlin

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

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

0
Diodeus - James MacFarlane