Question

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

    <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，

Answer 1

使用jQuery。

此方法有三个步骤：

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

为什么会这样？

required内的空form输入使其成为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>

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

1 个答案:

为什么会这样？