如何仅用CSS实现复选框与单选框的表单必填校验？

我创建了一个包含复选框和单选框的表单，希望将这些控件设为提交必填项，请问不借助JavaScript，只用CSS的实现方法是什么？

以下是我的代码示例：

复选框代码 #

<label class="checkbox-inline">
  <input type="checkbox" name="cb" checked> Montly Subscription - $JMD 5,000. First time subscription is $JMD 3999.
</label>
<label class="checkbox-inline">
  <input type="checkbox" name="cb" checked> Annual Subscription - $JMD 55,000. First time subscription $JMD 50,999.
</label>

单选框代码 #

<label class="radio-inline">
  <input type="radio" name="optradio" checked> MasterCard
</label>
<label class="radio-inline">
  <input type="radio" name="optradio"> Visa
</label>
<label class="radio-inline">
  <input type="radio" name="optradio" checked> Discover
</label>
<label class="radio-inline">
  <input type="radio" name="optradio"> Paypal
</label>

解决方案 #

你可以借助HTML原生的required属性搭配CSS伪类实现，全程不用写JavaScript，具体操作分单选框和复选框两类说明：

1. 单选框的必填设置 #

单选框组共享同一个name，只需给组内任意一个单选框添加required属性，浏览器就会自动校验该组至少选中一个。再用CSS的:invalid/:valid伪类给用户提供可视化提示。

修改后的单选框代码

<div class="radio-group">
  <label class="radio-inline">
    <input type="radio" name="optradio" required> MasterCard
  </label>
  <label class="radio-inline">
    <input type="radio" name="optradio"> Visa
  </label>
  <label class="radio-inline">
    <input type="radio" name="optradio"> Discover
  </label>
  <label class="radio-inline">
    <input type="radio" name="optradio"> Paypal
  </label>
  <span class="radio-hint"></span>
</div>

对应的CSS样式

/* 未选中任何单选框时显示提示 */
.radio-group:invalid .radio-hint::after {
  content: "请选择一种支付方式";
  color: #dc3545;
  font-size: 0.8em;
  display: block;
  margin-top: 4px;
}

/* 选中后隐藏提示 */
.radio-group:valid .radio-hint::after {
  content: "";
}

2. 复选框的必填设置 #

如果要求至少选中一个复选框，可以用CSS的:has()伪类判断组内是否有选中项，配合自定义提示元素完成样式提示。原生表单提交时，若未选中任何项，浏览器会触发默认校验拦截。

修改后的复选框代码

<div class="checkbox-group">
  <label class="checkbox-inline">
    <input type="checkbox" name="cb"> Montly Subscription - $JMD 5,000. First time subscription is $JMD 3999.
  </label>
  <label class="checkbox-inline">
    <input type="checkbox" name="cb"> Annual Subscription - $JMD 55,000. First time subscription $JMD 50,999.
  </label>
  <span class="checkbox-hint"></span>
</div>

对应的CSS样式

/* 无复选框选中时显示提示 */
.checkbox-group:not(:has(input[type="checkbox"]:checked)) .checkbox-hint::after {
  content: "请至少选择一种订阅方式";
  color: #dc3545;
  font-size: 0.8em;
  display: block;
  margin-top: 4px;
}

/* 有选中项时隐藏提示 */
.checkbox-group:has(input[type="checkbox"]:checked) .checkbox-hint::after {
  content: "";
}

关键说明 #

• 核心依赖HTML原生的表单校验能力，required属性会在表单提交时自动拦截未满足条件的请求，不需要JS介入。
• CSS仅负责提供自定义的视觉提示，增强用户体验；即使CSS失效，浏览器的默认校验提示依然会生效。
• :has()伪类是现代浏览器支持的特性（Chrome、Firefox 121+、Safari 15.4+），如果需要兼容旧版浏览器，可以简化样式，仅依赖浏览器默认的校验提示。

内容的提问来源于stack exchange，提问作者nia brown