无法为单选按钮设置:invalid伪类

Question

我有一个带有required属性的单选框组。我想根据是否选择了其中一个输入来控制单选框组的样式。但似乎:invalid并不适用于单选按钮。

- Alexander Suraphel

Answer 1

:invalid 实际上可以与单选按钮一起使用。我认为问题在于您添加的样式并未被应用。在此 fiddle 中，您可以看到我正在定位的两个单选按钮的间距要比其他两个大得多。点击其中一个后，它们会回到原来的间距：

FIDDLE

我建议您尝试自定义单选按钮的样式，像这个链接中的例子: http://code.stephenmorley.org/html-and-css/styling-checkboxes-and-radio-buttons/

- jmore009

---

一个更简单的查看:invalid如何适用于单选按钮的方法是设置input:invalid { outline: solid red }。我猜测OP试图在单选按钮上设置边框，但那个不起作用，请参阅https://dev59.com/Dmgv5IYBdhLWcg3wF9BP。 - Jukka K. Korpela

@JukkaK.Korpela 确实！这让我想到 :invalid 在单选按钮上不起作用... - Alexander Suraphel

Answer 2

:invalid 对我来说不起作用，除非我为至少一个 <input name="group" type="radio"> 标签设置了 required="required"。

示例：

input:invalid {
  outline: 3px red solid;
}

<input name="group" type="radio" value="1" required="required">
<input name="group" type="radio" value="2">
<input name="group" type="radio" value="3">

- Paulo Cheque

Answer 3

你的问题并不太清楚，

也许':checked'可以帮上忙？

- Silac