:invalid 伪类未设置为单选按钮答案

【问题标题】：The :invalid pseudo class not getting set for radio buttons:invalid 伪类未设置为单选按钮
【发布时间】：2017-07-26 02:37:00
【问题描述】：

我有一个具有必需属性的广播组。我正在尝试根据是否选择一个输入来控制无线电组的样式。但似乎 :invalid 不适用于单选按钮。

【问题讨论】：

标签： css html radio-button

【解决方案1】：

:invalid 实际上确实适用于单选按钮。我认为问题在于您添加的样式没有被应用。在这个小提琴中，您可以看到我瞄准的两个单选按钮比其他两个按钮间隔得更远。单击其中一个后，它们会恢复到原来的间距：

FIDDLE

我会研究像这样的单选按钮的自定义样式：http://code.stephenmorley.org/html-and-css/styling-checkboxes-and-radio-buttons/

【讨论】：

查看:invalid 适用于单选按钮的更简单方法是设置input:invalid { outline: solid red }。我的猜测是 OP 试图在单选按钮上设置边框，而 that 不起作用，参见。 stackoverflow.com/questions/10849626/…
@JukkaK.Korpela 没错！这让我认为:invalid 不适用于收音机...

【解决方案2】：

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

例子：

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

【讨论】：

【解决方案3】：

你的问题不是很清楚，

也许 ':checked' 有帮助？

【讨论】：