0

ラベルのテキストを画像で変更することは可能ですか? たとえば、#unaestrella には「UnaEstrella」というテキストがあり、クリア テキスト (またはパディングなどで画像を追加するだけ) が必要で、http://www.domain.com/images/unaestrella.pngから画像を表示します。これは可能ですか？

<ul class="radio_list">
    <li>
        <label for="unaestrella">
            <input id="unaestrella" type="radio" value="unaestrella" name="topics"/>
            UnaEstrella
        </label>
    </li>
    <li>
        <label for="dosestrellas">
            <input id="dosestrellas" type="radio" value="dosestrellas" name="topics"/>
            DosEstrellas
        </label>
    </li>
</ul>
4

3 に答える 3

2

はい、可能ですが、classにlabelは#unaestrellaをid使用します。 は に既に使用してinputおり、IDは一意であるID必要があり、 は 1 つの要素にのみ割り当てる必要があります。

CSS:

.unaestrella{
    background : url('https://m.dominos.co.uk/m/iphone/assets/img/common/icon-single-small.png') no-repeat right;
    padding: 0 25px 0 0;
    cursor:pointer;
}

HTML;

<label class="unaestrella" for="unaestrella">
    <input id="unaestrella" type="radio" value="unaestrella" name="topics" />
</label>

例。

于 2013-10-06T21:46:22.543 に答える
1

次のように<img/>要素を追加します。<label/>

HTMLで（http://jsfiddle.net/kyjey/）

<ul class="radio_list">

    <li>
        <input id="unaestrella" type="radio" value="unaestrella" name="topics"/>
        <label for="unaestrella">
            <img src="http://www.buscatuspa.com/wp-content/themes/Avada/images/unaestrella.png"/>
        </label>
    </li>

</ul>

jQuery を使用して作成者の要件に合わせて編集します( http://jsfiddle.net/kyjey/2/ )

$(function() {
    $('#unaestrella').next('label').empty().append('<img src="http://www.buscatuspa.com/wp-content/themes/Avada/images/unaestrella.png"/>');
})
于 2013-10-06T21:48:51.220 に答える