2 
<label for="apsgender">
    <div class="join-label">Gender</div>
</label>
    <fieldset id="gender_male">
        <input type="radio" name="apsgender" value="1">
            Male
        </fieldset>
    <fieldset id="gender_female">
        <input type="radio" name="apsgender" value="2">
            Female
        </fieldset>

これは私が今扱っているコードです。フィールドセットと奇妙なラベルを前もって使用しているため、別のstackoverflow投稿から取得したこの方法でcssを設定しても機能しません。

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

label {
    display:block;
    padding-left:30px;
    font-family:Arial;
    font-size:16px;
    background: url('http://projects.opengeo.org/common/geosilk/trunk/silk/cross.png') left center no-repeat;
}

input[type="radio"]:checked + label {
    background: url('http://particletree.com/examples/buttons/tick.png') left center no-repeat;
}

私たちの開発チームがこのコードを設定しましたが、ラジオ ボタンに画像を使用しようとした人は誰もいないと思います。また、可能であれば純粋な JS を使用することもできますが、スクリプトは要素の前にしか配置できず、後では配置できません。

これが可能かどうか教えてください。前もって感謝します。

私が取り組んでいるjsFiddleを投稿しますが、文字通りどこにも行きません。http://jsfiddle.net/z25FR/1/

4

3 に答える 3

4

これには CSS ソリューションがありますが、一部の HTML を変更する必要があります。

フィドル

まず、スタイルを設定できないため、ラジオ ボタンを非表示にする必要があります。

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

次に、ラジオ ボタンの近くのテキストをラベルにします。

<input id="male" type="radio" name="apsgender" value="1">
<label for="male">Male</label>

id( andまたは を忘れないでforください。ラジオ ボタンをチェックする方法はありません)。

次に、ラベルがボタンのように見えるようにスタイルを設定します。

input[type="radio"]+label{
    background: url('http://projects.opengeo.org/common/geosilk/trunk/silk/cross.png') left center no-repeat;
    padding-left: 30px;
}

上記のコードは、ラジオ ボタンの直後にあるラベルを変更します。次に、ラジオ ボタンが のときに背景を別の画像に変更できます:checked。

input[type="radio"]:checked+label{
    background-image: url('http://projects.opengeo.org/common/geosilk/trunk/silk/accept.png');
}
于 2013-06-26T14:10:15.267 に答える
3

これは役に立たないかもしれませんが、HTML のコーディングが間違っていることをお伝えします。そのはず：

<fieldset>
 <legend>Gender</legend>
 <input type="radio" name="apsgender" id="m" value="1">
 <label for="m">Male</label>
 <input type="radio" name="apsgender" id="f" value="2">
 <label for="f">Female</label>
</fieldset>

カスタム ラジオ ボタンを見たことがありますが、ソースがありません。ただし、その方法によっては、アクセシビリティに影響を与える可能性があります

于 2013-06-26T14:10:21.163 に答える
2

http://jsfiddle.net/nm3uB/1/

HTML を書き換えるには Javascript を使用し、フィールドの切り替えには CSS を使用する必要があります。すべてが頭の中に入ることができ、テンプレートに触れる必要はありません。

JS:

window.onload=function(){ 
    gender_male.innerHTML='<input type="radio" name="apsgender" value="1" checked><label>Male</label>';
    gender_female.innerHTML='<input type="radio" name="apsgender" value="2"><label>Female</label>';
}

CSS:

fieldset{position:relative}
input[type="radio"]{
    opacity: 0;
    position:absolute;
}
input[type="radio"]+label{
    background: url('http://projects.opengeo.org/common/geosilk/trunk/silk/cross.png') left center no-repeat;
    padding-left: 30px;
}
input[type="radio"]:checked+label{
    background: url('http://projects.opengeo.org/common/geosilk/trunk/silk/accept.png') left center no-repeat;
    padding-left: 30px;
}
于 2013-06-26T14:39:50.590 に答える