区分css中的单选按钮,我无法区分两个不同的单选按钮

时间:2012-10-11 12:04:24

标签: html css image css3 radio-button

我的注册表页面中有一组单选按钮,编码为:

<label for="text"><input type="radio" name="gen" id='gender' value="Male"> Male <input type="radio" name="gen" id='gender' value="Female"> Female </label><br/>

这些显示标准单选按钮。

我的测验页面中有另一组单选按钮,代码

<div class='checkoutform'>
    <?php for($i=0;$i<$whatever;$i++){
        if($i==0){
            echo "<div class='fieldlist'>";
            echo "<input class='checkedBox2' name='".$question["id"]."' type='radio' id='shipadd1'>";
            echo "<label for='shipadd1'>";
            echo $contents.'</label>';
            echo "</div>";
        }
        else{
            echo "<div class='fieldlist'>";
            echo "<input type='radio' id='shipadd$j' name='".$question["id"]."'>";
            echo "<label for='shipadd$j'>";
            echo "</div><br/>";
        }
    }
?>
</div>

问题是第二组单选按钮显示我想要的图像+标准单选按钮,我发现很难区分这两个。如果你能提供帮助那就太好了。这是我用于两组单选按钮的当前css:

.fieldlist{width:100%; background-color:#fffcd9}

input[type="radio"] + label{
background: url(/images/1.png) right center no-repeat;
background-size: 20px; 
height: 25px;
display:inline-block;
padding: 0 49px 0 0;
}

input[type="radio"]:checked + label{
    background-size: 20px; -moz-background-size: 20px;
    background: url(/images/2.png) right center no-repeat;
}

label[for=shipadd1]{
    width: 60%;
    float: left;
    text-align: left;
}

label[for=shipadd2]{
    width: 60%;
    float: left;
    text-align: left;
}

label[for=shipadd3]{
    width: 60%;
    float: left;
    text-align: left;
}

label[for=shipadd4]{
    width: 60%;
    float: left;
text-align: left;
}

所以,我试图在一个页面上使用标准单选按钮,擦除实际的单选按钮并替换它们以在第二页上使用。谁能告诉我哪里出错了?

提前致谢

2 个答案:

答案 0 :(得分:1)

你有两个具有相同身份的单选按钮

id='gender'

只是尝试将它们作为唯一的

id='genderMale'            id='genderFemale'

然后你根据身份对他们进行区分,不确定这是否是你要求的......

修改

你正在做的是糟糕的编码,正如我所说,不同的ID和共享的类......

答案 1 :(得分:1)

为前2个单选按钮添加公共类。第二集的另一类。通过这种方式,您可以区分它们。