选项组周围的 CSS 复选框无效错误边框框

Posted 2023-03-13

【中文标题】选项组周围的 CSS 复选框无效错误边框框

【英文标题】：CSS Checkbox Invalid Error Border Box Around Group of Options

【发布时间】：2017-12-26 22:03:51

【问题描述】：

如何在未选中但必需的复选框周围创建一个带边框的红色框？ 我现在是这样写的。

    <div class="fb-checkbox-group form-group field-checkbox-group-1500575975893">
   <label for="checkbox-group-1500575975893" class="fb-checkbox-group-label">Checkbox Group</label>
   <div class="checkbox-group">
      <div class="checkbox"><label for="checkbox-group-1500575975893-0"><input name="checkbox-group-1500575975893[]" value="option-1" type="checkbox">Option 1</label></div>
      <div class="checkbox"><label for="checkbox-group-1500575975893-1"><input name="checkbox-group-1500575975893[]" value="option-2" type="checkbox">option2</label></div>
      <div class="checkbox"><label for="checkbox-group-1500575975893-2"><input name="checkbox-group-1500575975893[]" value="option-3" type="checkbox">option-3</label></div>
   </div>
</div>

这是我的样式表的一部分。

.invalid checkbox-group:required:invalid 
    border: 3px solid #900;

我的代码没有产生任何东西。当我调整 CSS 时，我无法添加任何额外的类或 ID，我只能使用我拥有的类或 ID。 .invalid 来自打字稿文件。类型脚本文件假设在用户按下提交后显示所有无效元素。

我是关闭了还是我已经关闭了。有关如何更改 css 以便我可以正确显示带边框的框的任何建议？

以下是我的一些资料来源：Delay html5 :invalid pseudo-class until the first event， Applying border to a checkbox in Chrome,

【问题讨论】：

您的类型脚本文件是否添加了“必需”和“无效”类？它们是添加到 还是添加到输入标签？

它们被添加到我的 Typescript 文件中。它们不会添加到 或输入标签中。

【参考方案1】：

使用jQuery。

此方法分为三个步骤：

将输入包装在 form 元素中 将required attribute 添加到所有输入 一旦检查了至少一个输入，就使用 jQuery 从所有输入中删除属性

为什么会这样

form 中的空 required 输入使其变为 invalid

然后，如果未检查任何输入，您可以在 CSS 中定位 :invalid 表单以创建边框。

工作示例：

var checkboxes = $("input[type='checkbox']");

checkboxes.click(function() 
  !checkboxes.attr("required", !checkboxes.is(":checked"));
);

#myform 
  width: 200px;
  padding: 10px;
  border: 1px solid transparent


#myform:invalid 
  border: 1px solid red 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form id="myform">
  <label>Checkbox Group</label>
  <div>
    <input type="checkbox" name="option-1" id="option-1" required> <label for="option-1">Option 1</label>
  </div>
  <div>
    <input type="checkbox" name="option-2" id="option-2" required> <label for="option-2">Option 2</label>
  </div>
  <div>
    <input type="checkbox" name="option-3" id="option-3" required> <label for="option-3">Option 3</label>
  </div>
  <div>
    <input type="checkbox" name="option-4" id="option-4" required> <label for="option-4">Option 4</label>
  </div>
  <div>
    <input type="checkbox" name="option-5" id="option-5" required> <label for="option-5">Option 5</label>
  </div>
</form>