2

私はラジオボタンをカスタマイズしようとしてきました。そのために、ラジオボタンのチェックイベントとチェックされていないイベントに画像を追加する方法を知りたいのですが、それはすべてのブラウザで一般的である必要があります。さまざまな機能を試しましたが、すべて結果が得られますが、特定の欠陥があります私がやろうとしているのは、すべての raio ボタンを指定どおりに変換する css だけです。css アプローチのみを使用してそれを行う方法を教えてください (私はすでに jquery でそれを行いましたが、eash ラジオボタンのラベルが必要な欠陥があり、フロートを常に左に保つ)

よろしくお願いします。

4

1 に答える 1

2

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

input[type="radio"] {
    display:inline-block;
    height:20px;
    text-indent:-9999px;
    width:20px;
}

input[type="radio"], .notchecked {
    background:url("notchecked.png") 0 0 no-repeat;
}

input[type="radio"]:checked, .checked {
    background:url("checked.png") 0 0 no-repeat;
}

古いブラウザで使用したい場合は、jqueryでこれを追加できます。

$("input[type=radio]").on("change", function(){
    if($(this).is(":checked")) {
        $(this).addClass("checked");
    }
    else {
        $(this).removeClass("checked");
    }
});
$("input[type=radio]:checked").addClass("checked");

およびhtml：

<input type="radio" class="notchecked" value="true" />
于 2012-06-10T12:39:32.400 に答える