Question

我正在尝试使用按钮元素执行隐藏的单选按钮。带有+选择器的CSS样式在我使用span元素时起作用，但是按钮元素似乎不起作用。

我的HTML代码：

<div>
   <label>
       <input type="radio" name="test" class="hide-input" />
       <button class="radiobutton">Radio number one</button>
    </label>
</div>
<div>
   <label>
       <input type="radio" name="test" checked="checked" class="hide-input" />
       <button class="radiobutton">Radio number two</button>
    </label>
</div>

我的css风格：

.hide-input {
  position: absolute;
    overflow: hidden;
    clip: rect(0 0 0 0);
    margin: 0;
    padding: 0;
  border: 0;
  opacity: 0.001;
}

.radiobutton{
  margin: 5;
}

.hide-input:checked+.radiobutton
{
    font-weight: bold;  
}

这是一个尝试它的jsfiddle例子：http://jsfiddle.net/q7nvpmvj/

任何人都可以详细说明为什么它不使用按钮元素？有可能修复吗？

更新：问题是，当我点击第一个按钮时，它不会改变样式。

Answer 1

按钮行为优先于标签行为。它也无法工作，因为label需要for属性来定位输入的ID。

这里的解决方法是使用简单的标签而不是按钮，然后为标签指定按钮的样式。

这是一个小提示，当然你可以修改标签样式以接近原始按钮样式。

我希望这能达到你想要的目的。

JSFiddle

编辑：此外，您可以在收音机输入上使用简单的display: none;来隐藏它们。

Updated JSFiddle

CSS +选择器不适用于输入和按钮

1 个答案: