0

尝试编辑两个单选按钮的外观，如果标记如下：

<ul class="radioHorizontal">
    <li class="spaceRight">
        <input id="radioYes" type="radio" name="radios" checked>
        <label for="radioYes">Yes</label>
    </li>
    <li>
        <input id="radioNo" type="radio" name="radios">
        <label for="radioNo">No</label>
    </li>
</ul>

但是，如果我删除：name="radios"并保持其他所有内容不变，无论是在我的ul列表内部还是外部，按钮都不会被取消选中，我想要的效果就会被破坏。

My CSS3 is as follows:

    input[ type = radio ]
{
    display:none; 
}

input[ type = radio ] + label
{
    padding: 4px 12px;
    background-color: rgba( 40, 40, 40, 1 );

    border: 2px solid rgb( 30, 30, 30 );
    box-shadow: 0px 1px 0px rgba( 125, 125, 125, 0.75 );
}

input[ type = radio ]:checked + label
{ 
    background-image: none;
    background-color: rgba( 255, 255, 255, 0.4 );
}

我使用 name="radios" 没有问题，除非有一些不可预见的、奇怪的特殊情况禁止它。我只是好奇为什么 CSS3 需要这样做。

4

1 回答 1

6

它根本不影响 CSS，但需要名称才能对它们进行分组。只能选择组中的一个单选按钮，其他单选按钮自动取消选择。如果你不给他们一个名字，他们每个人都在他们自己的组中。

于 2013-07-06T16:26:58.973 回答