尝试将不同的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类分配给单选按钮的输入标签

回答

相关问题