嘗試將不同的CSS類分配給單選按鈕的輸入標籤

我正在嘗試更新我用於足球選秀的網站。嘗試將不同的CSS類分配給單選按鈕的輸入標籤

目前我有人通過無線電調查爲16個遊戲提交選秀權。

我試圖用圖像按鈕系統替換標準標籤和收音機組合。我會爲所有32個橄欖球隊提供一張表格，每個團隊3張圖片（正常，懸停和點擊），CSS將從該文件中繪製以顯示每個按鈕。

所以我的問題是我不知道最好的方式去做這件事。

我能夠找出並定位一個按鈕，但是我需要爲每個團隊分配一堆不同的班級，主客場嗎？

到目前爲止，在HTML我有：

<input class="ARIaway" type="radio" id="game1_0" name="ARI" value="ARI"> <label for="game1"><span></span></label> <input class="NOhome" type="radio" id="game1_1" name="NO" value="NO"> <label for="game1"><span></span></label>

因此，這將是一個遊戲ARI @ NO。我寫的CSS是：

input[type="radio"] { 
    display:none; 
} 
input[type="radio"] + label span { 
    display:inline-block; 
    width:300px; 
    height:50px; 
    vertical-align:middle; 
    cursor:pointer; 
    background-image: url(TeamsButtons/ARIaway.png); 
    background-repeat: no-repeat; 
    background-position: left top; 
} 

input[type="radio"]:hover +label span { 
    background-image: url(TeamsButtons/ARIaway.png); 
    background-repeat: no-repeat; 
    background-position: left center; 
} 

input[type="radio"]:checked + label span { 
    background-image: url(TeamsButtons/ARIaway.png); 
    background-repeat: no-repeat; 

    background-position: left bottom; 
}

此代碼正確，使ARIaway按鈕演出，但我堅持，因爲我想，如果我用其他按鈕類似的代碼，它不會因爲工作它將應用於所有輸入標籤，並且它們都將相互競爭。

想一個標籤：

input[type="radio"][class="ARIaway"]

與

input[type="radio"][class="NOhome"]

工作？

來源

2014-10-19 Craig Butterfield

你的意思input.ARIaway [類型= 「無線電」] input.NOhome [類型= 「無線電」] – cforcloud 2014-10-19 07:28:32

讓我們添加一個新的風格，比如.cool單選按鈕。

input.cool[type="radio"] { 
 
    \t display:none; 
 
} 
 
input.cool[type="radio"] + label { 
 
\t display:inline-block; 
 
\t width:300px; 
 
\t height:50px; 
 
\t vertical-align:middle; 
 
\t cursor:pointer; 
 
\t background-image: url(TeamsButtons/ARIaway.png); 
 
\t background-repeat: no-repeat; 
 
\t background-position: left top; 
 

 
\t /* dummy for testing */ 
 
\t background-image: url("http://cdn.sstatic.net/img/share-sprite-new.png"); 
 
\t background-color: #AAA; 
 
} 
 

 
input.cool[type="radio"] + label:hover { 
 
\t background-position: left center; 
 
\t background-color: #FAA; 
 
} 
 

 
input.cool[type="radio"]:checked + label { 
 
\t background-position: left bottom; 
 
\t background-color: #AFA; 
 
}

<input class="ARIaway cool" type="radio" id="game0" name="ARI" value="ARI"> 
 
<label for="game0"><span>ARIaway</span></label> 
 
<input class="NOhome cool" type="radio" id="game1" name="ARI" value="NO"> 
 
<label for="game1"><span>NOhome</span></label>

來源

2014-10-19 07:37:00 cforcloud

嘗試將不同的CSS類分配給單選按鈕的輸入標籤

回答

相關問題