如何將CSS（背景圖片）應用於單選按鈕時？

我已設置的單選按鈕等下面，如何將CSS（背景圖片）應用於單選按鈕時？

<input type="radio" NAME="pizzasize" value="1"/>100&#37; of the time<br /> 
    <input type="radio" NAME="pizzasize" value="2" />75&#37; of the time<br /> 
     <input type="radio" NAME="pizzasize" value="3"/>50&#37; of the time<br /> 
     <input type="radio" NAME="pizzasize" value="4"/>25&#37; of the time<br />

我需要改變單選按鈕格式等在上述的圖像。我怎樣才能做到這一點？..

感謝拉維

來源

2011-07-13 Ravichandran Jothi

最簡單的事情很可能會定義一個類「選擇」，然後就分配一個類在RadioButtonList的檢查選項。

$("#whatevertheparentidis :radio").removeClass("selected"); 
$("#whatevertheparentidis :checked").addClass("selected");

您可以將該圖像定義爲.selected類中的背景圖像。

來源

2011-07-13 12:45:38 Narnian

ok ..很好......但我需要顯示如上面的樣式的tickmark和radiobutton框。 –

您應該能夠爲複選標記定義背景圖像並將其適當放置。 – Narnian

實際上，您可能會定義兩個圖像 - 一個用於未選中，一個用於選中。 – Narnian

Appart通過javascript/jquery設置選擇類，您可以使用僞類選擇器，如:checked。請參閱browser compatibility。

來源

2011-07-13 12:50:19 Vlad

您會希望將單選按鈕放在label s並將背景樣式應用於標籤（也可以將樣式添加到單選按鈕本身，但請記住它們的文本是單獨的元素）。不幸的是，由於CSS沒有被討論的:contains僞類（因爲性能問題），所以你將被迫拋出一些JavaScript。

例（live copy）：

CSS：

label.highlight { 
    background-color: yellow; /* Or whatever, obviously */ 
} 

input[type=radio] { 
    /* Styles you want applied to the radio buttons when *not* selected */ 
} 

label.highlight input[type=radio] { 
    /* ...any styles you want applied to the radio button when 
     it's selected; this is more broadly cross-compatible 
     than :checked, sadly */ 
}

HTML：使用

<label><input type='radio' name='foo' value='1'> One</label> 
<br><label><input type='radio' name='foo' value='2'> Two</label> 
<br><label><input type='radio' name='foo' value='3'> Three</label>

JavaScript的jQuery的：

jQuery(function($) { 

    $("input:radio").click(function() { 
    if (this.checked) { 
     $("label.highlight").removeClass("highlight"); 
     $(this).closest("label").addClass("highlight"); 
    } 
    }); 

});

很明顯，你會想縮小日OSE選擇了一下你的實際的標記，如上述的將應用到頁面上的所有單選按鈕...

這由樣式單選按鈕自己的一種方式時，他們沒有一個label內側highlight類的工作，當他們是時不同的方式。然後，當單擊單選按鈕時，只需在label上切換highlight類，然後CSS負責其餘部分，同時設置label（獲取背景顏色/圖像）和單選按鈕（如果您想進行復選標記）。

來源

2011-07-13 12:52:44

我在一個頁面上有兩組不同的單選按鈕，我將如何修改jQuery，以便在每組中使用'highlight'。 – alenm

@neuone：只需在它上面添加一個'[name =「name_here」]'[attribute'equals'selector]（http://api.jquery.com/attribute-equals-selector/）。 –

在我的Rails應用程序中，我有類似這樣的代碼'<％= f.radio_button：role_id，role.id％>'產生一個這樣的單選按鈕' Admin'。在你的建議中，我應該把它寫成這樣：[name =「posting [role_id]」]' – alenm

我不認爲任何瀏覽器都支持單選按鈕的背景圖像。輸入對象通常是難以改變其外觀的候選對象。

我想最好用你想要的圖片來設置一個span或div盒，然後用javascript或者b）將它連接到a）隱藏的radiobuttons（通過css隱藏它） PHP。通過谷歌

第一現場：http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/

來源

2011-07-13 12:53:52 cposer

不能樣式的單選按鈕本身（至少，不是你問的程度）。但是，儘管如此，仍然有許多方法可以在沒有Javascript的情況下實現你要查找的效果（即純粹的CSS來切換已檢查/未打開的圖像）。

See here瞭解如何對複選框執行此操作的示例。

單選按鈕可以使用相同的技術完成。

最大的不利之處在於它使用CSS :checked選擇器，IE8和更低版本不支持該選擇器。可悲的是，這可能足以使這種技術毫無用處，至少暫時是如此。

與此同時，您將不得不使用Javascript解決方案。但它可能是一個非常簡單的Javascript - 上面的鏈接中的大多數CSS將在IE8中工作;它只是:checked選擇器 - 所以你可以使用類來代替，並簡單地讓Javascript切換類名，所以它將是一個單行的Javascript。

來源

2011-07-13 12:57:04 Spudley

在我的場景我有兩套單選按鈕，我希望他們有自己的'突出'標籤，我希望他們堅持每個自己的設置。它感覺不舒服，但它的作品。我不喜歡寫highlight-work和highlight-status，但我不知道如何讓highlight保持在每個單選按鈕集內。

jQuery(function($) { 
    $("input:radio").click(function() { 
     if (this.name == [name="posting[role_id]"]) { 
     // group 1 clicked 
     $("label.highlight-work").removeClass("highlight-work"); 
     $(this).closest("label").addClass("highlight-work"); 
     } else if (this.name == [name="posting[status_id]"]) { 
     // group 2 clicked 
     $("label.highlight-status").removeClass("highlight-status"); 
     $(this).closest("label").addClass("highlight-status"); 
     } 
    }); 
});

來源

2012-02-13 19:12:27 alenm

如何將CSS（背景圖片）應用於單選按鈕時？

回答

相關問題