web-dev-qa-db-ja.com

ラジオボタンを画像に置き換える方法は？

標準のラジオボタンの代わりに、ラジオボタンごとに異なる画像を使用したいと思います。選択した状態で、画像の周囲に境界線を表示したいと思います。

ラジオボタンの画像ラベルを作成してボタンを非表示にしようとしましたが、何らかの理由で機能が損なわれているようです。

私もこの記事に出くわしました： http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/ どういうわけか、私の目的にねじれる可能性があります。

より簡単で良い方法はありますか？

htmlcssformsradio-button
14
Zach Lysobey

jQuery

        $('input:radio').hide().each(function() {
            $(this).attr('data-radio-fx', this.name);
            var label = $("label[for=" + '"' + this.id + '"' + "]").text();
            $('<a ' + (label != '' ? 'title=" ' + label + ' "' : '' ) + ' data-radio-fx="'+this.name+'" class="radio-fx" href="#">'+
                '<span class="radio' + (this.checked ? ' radio-checked' : '') + '"></span></a>').insertAfter(this);
        });
        $('a.radio-fx').on('click', function(e) {
            e.preventDefault();
            var unique = $(this).attr('data-radio-fx');
            $("a[data-radio-fx='"+unique+"'] span").attr('class','radio');
            $(":radio[data-radio-fx='"+unique+"']").attr('checked',false);
            $(this).find('span').attr('class','radio-checked');
            $(this).prev('input:radio').attr('checked',true);
        }).on('keydown', function(e) {
            if ((e.keyCode ? e.keyCode : e.which) == 32) {
                $(this).trigger('click');
            }
        });
  • デモソースの完全なコード。
22
Luca Filosofi

はいあります！これは簡単な方法の例です：

JavaScriptは不要

[〜＃〜] css [〜＃〜]

.radio_item{
display: none !important;
}

.label_item {
opacity: 0.1;
}

.radio_item:checked + label {
opacity: 1;
}

[〜＃〜] html [〜＃〜]

<!--RADIO 1-->
<input type="radio" class="radio_item" value="" name="item" id="radio1">
<label class="label_item" for="radio1"> <img src="img_url_here"> </label>

<!--RADIO 2-->
<input type="radio" class="radio_item" value="" name="item" id="radio2">
<label class="label_item" for="radio2"> <img src="img_url_here"> </label>

[〜＃〜] fiddle [〜＃〜]

30
KeepMove

2つの異なる解決策を提案できます。

CSSソリューション：

/*
  Hide radio button (the round disc)
  we will use just the label to create Push button effect
*/
input[type=radio] {
    display:none; 
    margin:10px;
}

/*
  Change the look'n'feel of labels (which are adjacent to radio buttons).
  Add some margin, padding to label
*/
input[type=radio] + label {
    display:inline-block;
    margin:-2px;
    padding: 4px 12px;
    background-color: #e7e7e7;
    border-color: #ddd;
}
/*
 Change background color for label next to checked radio button
 to make it look like highlighted button
*/
input[type=radio]:checked + label { 
   background-image: none;
    background-color:#d0d0d0;
}

hTML付き

<input type="radio" id="radio1" name="radios" value="all" checked>
   <label for="radio1">iPhone</label>
<input type="radio" id="radio2" name="radios"value="false">
   <label for="radio2">Galaxy S IV</label>
<input type="radio" id="radio3" name="radios" value="true">
   <label for="radio3">Nexus S</label>

JAVASCRIPTソリューション

ここにデモ

5
HMagdy

まだ調べていませんが、これは有望に聞こえます： http://www.thecssninja.com/css/custom-inputs-using-css

3
Christopher Davies

私は少し前に同じ問題を抱えていましたが、このjQueryソリューションは完全に機能し、うまく機能しません。

http://www.adamcoulombe.info/lab/jquery/select-box/

私はそれをカスタムスタイルの選択ドロップダウンに使用しました。実装は非常に簡単です。たとえば、クラスをターゲットとする$('.mySelectBoxClass')の変数を$('select')に置き換えます。これにより、ページ上のすべての選択要素がターゲットになります。同じ規則がラジオボタンにも適用されます。

2
Dan

質問に追加したリンクよりも簡単な方法はないと思います。それが私が知っている唯一の方法です。自分の質問に効果的に答えたと思います。それのバッジはありませんか？

また、同様の質問がここで回答されました： スタイリングチェックボックス、ラジオボタン、およびドロップダウン

チェックアウトできるビルド済みのソリューションがさらにいくつか含まれています。あなたが視覚的に達成しようとしていることについての詳細な情報なしでは、それらのどれかがあなたのために働くかどうか私は言うことができません。

幸運を！

1
Dubmun

ASeptikのソリューションにはバグがあり、チェックされたラジオボタンをクリックすると、チェックが外れます。以下の調整を行って修正しました。

$('a.radio-fx').on('click', function(e) {
        e.preventDefault();
        if($(this).prev('input:radio').is(':checked')) return;
        ...

そう...

$('input:radio').hide().each(function() {
        $(this).attr('data-radio-fx', this.name);
        var label = $("label[for=" + '"' + this.id + '"' + "]").text();
        $('<a ' + (label != '' ? 'title=" ' + label + ' "' : '' ) + ' data-radio-fx="'+this.name+'" class="radio-fx" href="#">'+
            '<span class="radio' + (this.checked ? ' radio-checked' : '') + '"></span></a>').insertAfter(this);
    });
    $('a.radio-fx').on('click', function(e) {
        e.preventDefault();
        if($(this).prev('input:radio').is(':checked')) return;
        var unique = $(this).attr('data-radio-fx');
        $("a[data-radio-fx='"+unique+"'] span").attr('class','radio');
        $(":radio[data-radio-fx='"+unique+"']").attr('checked',false);
        $(this).find('span').attr('class','radio-checked');
        $(this).prev('input:radio').attr('checked',true);
    }).on('keydown', function(e) {
        if ((e.keyCode ? e.keyCode : e.which) == 32) {
            $(this).trigger('click');
        }
    });

素晴らしいソリューションを提供してくれたaSeptikに感謝します！

1
lbbrooks

私がネットで見つけた非常にシンプルなソリューション。

http://jsbin.com/image-instead-of-radio-button/3/edit?html,css,output

1
eliprodigy