用图像改变标签的文字

用图像改变标签的文字是可能的吗？例如，#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>

来源

2013-10-06 vektor

我可以用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;}

但它可能与jQuery的删除文本？

来源

2013-10-06 21:56:30 vektor

是的，这是可能的，但使用class为label，因为#unaestrella是id您已经用于input和ID必须是唯一的，一个ID必须被分配到只有一个元素。

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.

来源

2013-10-06 21:46:22

谢谢，只有一个问题，为插件生成html。我找到了一个可行的解决方案：ul.radio_list li label [for = unaestrella] {position：relative！important; float：left！important; line-height：25px！important; background-image：url（images/unaestrella.png）;背景位置：左上角;背景重复：不重复！重要;宽度：100％！重要;颜色：透明！重要;}请点击此处：http://www.buscatuspa.com/?post_type=post&topics=cincoestrellas – vektor

那么，有什么问题？ –

用jQuery删除文本可能吗？ – vektor

添加<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-06 21:48:51 rd3n

谢谢，只有一个问题，为插件生成html。我找到了一个可行的解决方案：ul.radio_list li label [for = unaestrella] {position：relative！important; float：left！important; line-height：25px！important; background-image：url（images/unaestrella.png）;背景位置：左上角;背景重复：不重复！重要;宽度：100％！重要的;颜色：透明的！重要的;}检查在这里：http://www.buscatuspa.com/?post_type=post&topics=cincoestrellas – vektor

这可能与jQuery删除文本？ – vektor

查看jquery版本是否适合您的需求 – rd3n

用图像改变标签的文字

回答

相关问题