0

チェックボックスのスタイルを設定したい。次の HTML マークアップと CSS を使用してそれを行うことができます。

ただし、問題は、変更できない HTML マークアップが少し異なることです。変更できない理由は、プラグインによって生成されているためです。コア ファイルを編集して変更する必要がありますが、これはやりたくないことです。

では、以下にある HTML に同じスタイルを追加するにはどうすればよいですか。

作業中の HTML:

<input type="radio" id="radio">
<label for="radio"></label>

必要な HTML:

<li>
    <input id="option-11" type="radio" value="11">
    <label for="option-11">Option one</label>
</li>

ご覧のとおり、マークアップは似ていますが、上の例ではラベルを使用してテキストを表示しています。

CSS:

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

input[type="radio"] + label{
    background:url('http://refundfx.com.au/uploads/image/checkbox_empty.png');
    padding:0;
    display: inline-block;
    width:20px;
    height:20px;
}

input[type="radio"]:checked + label {
    background:url('http://refundfx.com.au/uploads/image/checkbox_full.png');
}

デモ: http://jsfiddle.net/JPSLm/

4

1 に答える 1

-1

それはあなたのコードで動作しますが、どこに問題があるのか​​ わかりません。

http://jsfiddle.net/sGqsL/

HTML

<li>
    <input type="radio" id="radio" name="radiogroup"/>
    <label for="radio"></label>
</li>

とCSS

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

input[type="radio"] + label{
    background:url('http://refundfx.com.au/uploads/image/checkbox_empty.png');
    padding:0;
    display: inline-block;
    width:20px;
    height:20px;
}

input[type="radio"]:checked + label {
    background:url('http://refundfx.com.au/uploads/image/checkbox_full.png');
}

li {
    list-style-type: none;
}
于 2013-04-05T08:10:16.477 に答える