change text of label with image

Question

It's possible change text of label with image? For example, #unaestrella have text "UnaEstrella" and i want clear text (or simply add image with padding or similar) and show an image from http://www.domain.com/images/unaestrella.png. It's this possible?

<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>

Answer 1

I can solve this with css:

ul.radio_list li label[for=unaestrella] {position:relative !important;float:left !important;line-height:25px !important;background-image:url(images/unaestrella.png);background-position:top left;background-repeat:no-repeat !important; width:100% !important;color:transparent !important;}

But it's possible with jQuery for delete text?

Answer 2

Yes, it's possible but use a class for the label, because #unaestrella is the id that you have already used for the input and an ID must be unique, one ID must be assigned to only one element.

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>

EXAMPLE.

Answer 3

Add an <img/> element into your <label/> like this :

In 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>

Edit to fit author requirement using 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"/>');
})