用圖像改變標籤的文字

用圖像改變標籤的文字是可能的嗎？例如，#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

用圖像改變標籤的文字

回答

相關問題