ラジオボタンの代わりに画像を使用する

167

ボタン付きのラジオグループがある場合：

画像1

...ボタンではなく選択オプションで画像のみを表示するにはどうすればよいですか。

ここに画像の説明を入力してください

html  css 
— ビグネシュピカマニ
ソース
コードのライブリンクまたはjsFiddleを表示できますか？
— Nitesh 2013
3
ラジオボタンセットを作成し、非表示のdivに配置します。画像クリックセットでは、特定のラジオボタンがオンになっているということは、最初の画像クリックセットで最初のラジオボタンがオンになっていることを意味し、他の2つについても同様です。わからない場合は、コードでも説明できます。
— Chiragit007 2013
ここで機能しない場合は、stackoverflow.com / questions / 42736745
— Code Guy

回答:

387
  • ラジオと画像をラップ<label>
  • ラジオボタンを非表示にする（使用しないdisplay:noneかvisibility:hidden、アクセシビリティに影響を与えるため）
  • 隣接する兄弟セレクターを使用して、非表示のラジオの横にある画像をターゲットにします +

/* HIDE RADIO */
[type=radio] { 
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* IMAGE STYLES */
[type=radio] + img {
  cursor: pointer;
}

/* CHECKED STYLES */
[type=radio]:checked + img {
  outline: 2px solid #f00;
}
<label>
  <input type="radio" name="test" value="small" checked>
  <img src="http://placehold.it/40x60/0bf/fff&text=A">
</label>

<label>
  <input type="radio" name="test" value="big">
  <img src="http://placehold.it/40x60/b0f/fff&text=B">
</label>
スニペットを展開

ラベルにクラスを追加することを忘れないでください。CSS では代わりにそのクラスを使用してください。

カスタムスタイルとアニメーション

<i>要素と:after疑似を使用した高度なバージョンは次のとおりです。

CSSカスタムラジオとチェックボックス

body{color:#444;font:100%/1.4 sans-serif;}


/* CUSTOM RADIO & CHECKBOXES
   http://stackoverflow.com/a/17541916/383904 */
.rad,
.ckb{
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.rad > input,
.ckb > input{ /* HIDE ORG RADIO & CHECKBOX */
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
/* RADIO & CHECKBOX STYLES */
/* DEFAULT <i> STYLE */
.rad > i,
.ckb > i{ 
  display: inline-block;
  vertical-align: middle;
  width:  16px;
  height: 16px;
  border-radius: 50%;
  transition: 0.2s;
  box-shadow: inset 0 0 0 8px #fff;
  border: 1px solid gray;
  background: gray;
}
/* CHECKBOX OVERWRITE STYLES */
.ckb > i {
  width: 25px;
  border-radius: 3px;
}
.rad:hover > i{ /* HOVER <i> STYLE */
  box-shadow: inset 0 0 0 3px #fff;
  background: gray;
}
.rad > input:checked + i{ /* (RADIO CHECKED) <i> STYLE */
  box-shadow: inset 0 0 0 3px #fff;
  background: orange;
}
/* CHECKBOX */
.ckb > input + i:after{
  content: "";
  display: block;
  height: 12px;
  width:  12px;
  margin: 2px;
  border-radius: inherit;
  transition: inherit;
  background: gray;
}
.ckb > input:checked + i:after{ /* (RADIO CHECKED) <i> STYLE */
  margin-left: 11px;
  background:  orange;
}
<label class="rad">
  <input type="radio" name="rad1" value="a">
  <i></i> Radio 1
</label>
<label class="rad">
  <input type="radio" name="rad1" value="b" checked>
  <i></i> Radio 2
</label>

<br>

<label class="ckb">
  <input type="checkbox" name="ckb1" value="a" checked>
  <i></i> Checkbox 1
</label>
<label class="ckb">
  <input type="checkbox" name="ckb2" value="b">
  <i></i> Checkbox 2
</label>
スニペットを展開

— ロコ・C・ブルジャン
ソース
10
疑似セレクターの+1、過去にJavaScriptを使用して選択されているかどうかを確認したことがあります！それは私に教えます...
— zik
3
非表示の可視性はクリックできないことを意味し、絶対位置はドキュメントフローから除外します
— 99の問題-構文は1つではありません
1
これは素晴らしい答えです。同じことが同じように機能することを付け加えてくださいtype="checkbox"。
— タワー、2015年
わかりました。これはすばらしいです。.IEでも動作するようですが、実際はそうではありません。画像は正しく動作しますが、フォームが送信されたとき、サムネイルは選択されません。Win 8.1に付属する新しいIEを使用していると思います。何か案が？
— Junaid Rehman、
3
パーティーには遅れますが、これには注意してください。Visibility:hiddenスクリーンリーダーからの入力を非表示にし、アクセシビリティの観点からは大きな違いはありません。
— DPac 2016年
100

例：

注意喚起！このソリューションはCSSのみです。

クレジットカードセレクター、改造されたデモのマスターカードはホバリングされています。

CSS3ルールを使用してデフォルトの入力ラジオボタンを非表示にすることにより、CSS3を利用してそれを行うことをお勧めします。

.options input{
    margin:0;padding:0;
    -webkit-appearance:none;
       -moz-appearance:none;
            appearance:none;
}

ほんの数日前に例を挙げます。

— リチャードコトリーナ
ソース
1
これは素晴らしかったです！私はそれをASP.NETフォームに統合し、それは魅力のように機能しました:)
— Gus
この例は、XUbuntu 16.04.1のFirefox 49.0.2では機能しません
— Sergey Kudriavtsev
@SergeyKudriavtsev多分コードの必要性と更新（この答えは2013年からです）。ありがたいことに、誰でもコードを改善できるようにコードを公開しています。すぐに調べます。乾杯。
— Richard Cotrina 16
罰金は、Firefox 60、Windowsの10で私の作品
— トレバー
私はこれを3つの笑顔のセットで機能させています。ここで、1つのフォームに複数の行が必要で、それぞれに独自の笑顔のセットがあります。私の問題は、1つの行が変更されると、すべてが変更されることです。これを達成するためにどの部分を変更する必要があるか、考えはありますか？
— dave317
19

そのためにCSSを使用できます。

HTML（デモのみ、カスタマイズ可能）

<div class="button">
    <input type="radio" name="a" value="a" id="a" />
    <label for="a">a</label>
</div>
<div class="button">
    <input type="radio" name="a" value="b" id="b" />
    <label for="b">b</label>
</div>
<div class="button">
    <input type="radio" name="a" value="c" id="c" />
    <label for="c">c</label>
</div>
...

CSS

input[type="radio"] {
    display: none;
}
input[type="radio"]:checked + label {
    border: 1px solid red;
}

jsFiddle

— フラクシ
ソース
6

ラジオボタンを非表示にして、画像をクリックしたときにJavaScriptを使用してそれらを選択し、選択したように見えるように画像のスタイルを設定します。これがマークアップです-

<div id="radio-button-wrapper">
    <span class="image-radio">
        <input name="any-name" style="display:none" type="radio"/>
        <img src="...">
    </span>
    <span class="image-radio">
        <input name="any-name" style="display:none" type="radio"/>
        <img src="...">
    </span>
</div>

とJS

 $(".image-radio img").click(function(){
     $(this).prev().attr('checked',true);
 })

CSS

span.image-radio input[type="radio"]:checked + img{
    border:1px solid red;
}
— モアッザム・カーン
ソース
4

クラスを使用して一部を非表示にするだけ... https://stackoverflow.com/a/17541916/1815624に基づく

/* HIDE RADIO */
.hiddenradio [type=radio] { 
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* IMAGE STYLES */
.hiddenradio [type=radio] + img {
  cursor: pointer;
}

/* CHECKED STYLES */
.hiddenradio [type=radio]:checked + img {
  outline: 2px solid #f00;
}
<div class="hiddenradio">
<label>
  <input type="radio" name="test" value="small" checked>
  <img src="http://placehold.it/40x60/0bf/fff&text=A">
</label>

<label>
  <input type="radio" name="test" value="big">
  <img src="http://placehold.it/40x60/b0f/fff&text=B">
</label>
</div>

<div class="">
<label>
  <input type="radio" name="test" value="small" checked>
  <img src="http://placehold.it/40x60/0bf/fff&text=A">
</label>

<label>
  <input type="radio" name="test" value="big">
  <img src="http://placehold.it/40x60/b0f/fff&text=B">
</label>
</div>
スニペットを展開

— クランデルWS
ソース
1

以下は、この例に基づく簡単なjQuery UIソリューションです。

http://jqueryui.com/button/#radio

変更されたコード：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Button - Radios</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script>
  $(function() {
    $( "#radio" ).buttonset();
  });
  </script>
</head>
<body>

<form>
  <div id="radio">
    <input type="radio" id="radio1" name="radio"><label for="radio1"><img src="image1.gif" /></label>
    <input type="radio" id="radio2" name="radio" checked="checked"><label for="radio2"><img src="image2.gif" /></label>
    <input type="radio" id="radio3" name="radio"><label for="radio3"><img src="image3.gif" /></label>
  </div>
</form>

</body>
</html>

jQueryUIが画像の背景を処理するため、どのボタンがチェックされているかがわかります。

注意：ボタンをJavascriptでオンまたはオフに設定する場合は、更新関数を呼び出す必要があります。

        $('#radio3').prop('checked', true).button("refresh");
— Atmelino
ソース
0

label要素とspan要素を使用して、ラジオボタンの代わりに画像を配置できます。

   <div class="customize-radio">
        <label>Favourite Smiley</label><br>
        <label for="hahaha">
        <input type="radio" name="smiley" id="hahaha">
        <span class="haha-img"></span>
        HAHAHA
        </label>
        <label for="kiss">
        <input type="radio" name="smiley" id="kiss">
        <span class="kiss-img"></span>
        Kiss
        </label>
        <label for="tongueOut">
        <input type="radio" name="smiley" id="tongueOut">
        <span class="tongueout-img"></span>
        TongueOut
        </label>
    </div>

ラジオボタンは非表示にする必要があります。

.customize-radio label > input[type = 'radio'] {
    visibility: hidden;
    position: absolute;
}

画像はスパンタグで与えることができ、

.customize-radio label > input[type = 'radio'] ~ span{
    cursor: pointer;
    width: 27px;
    height: 24px;
    display: inline-block;
    background-size: 27px 24px;
    background-repeat: no-repeat;
}
.haha-img {
    background-image: url('hahabefore.png');
}

.kiss-img{
    background-image: url('kissbefore.png');
}
.tongueout-img{
    background-image: url('tongueoutbefore.png');
}

ラジオボタンのクリックで画像を変更するには、チェックされた状態を入力タグに追加し、

.customize-radio label > input[type = 'radio']:checked ~ span.haha-img{
     background-image: url('haha.png');
}
.customize-radio label > input[type = 'radio']:checked ~ span.kiss-img{
    background-image: url('kiss.png');
}
.customize-radio label > input[type = 'radio']:checked ~ span.tongueout-img{
        background-image: url('tongueout.png');
}

質問がある場合は、次のリンクを参照してください。以下のブログから解決策を取っているので、 http：//frontendsupport.blogspot.com/2018/06/cool-radio-buttons-with-images.html

— 初心者
ソース
0

これは非常に簡単な例です 

input[type="radio"]{
   display:none;
}

input[type="radio"] + label
{
    background-image:url(http://www.clker.com/cliparts/c/q/l/t/l/B/radiobutton-unchecked-sm-md.png);
    background-size: 100px 100px;
    height: 100px;
    width: 100px;
    display:inline-block;
    padding: 0 0 0 0px;
    cursor:pointer;
}

input[type="radio"]:checked + label
{
    background-image:url(http://www.clker.com/cliparts/M/2/V/6/F/u/radiobutton-checked-sm-md.png);
}
<div>
  <input type="radio" id="shipadd1" value=1 name="address" />
  <label for="shipadd1"></label>
  value 1
</div>

<div>
  <input type="radio" id="shipadd2" value=2 name="address" />
  <label for="shipadd2"></label>
  value 2
</div>
スニペットを展開

デモ：http : //jsfiddle.net/La8wQ/2471/

このトリックに基づいたこの例：https : //css-tricks.com/the-checkbox-hack/

私はそれをテストしました：chrome、firefox、safari

— カミル・キエチェフスキー
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.