Question

参数A和C的输入无效，但仅C突出显示。有没有办法确保参数A也能做到？

<html>
<head>
<style type='text/css'>
body, input, select { 
  font-family: "Segoe UI", sans-serif;
}
span.field {
  display:  block;
  position: relative;
}
form {
  width: 500px;
  display: inline-block;
}
input:invalid, fieldset:disabled input:invalid {
  border: 3px solid red;
}
fieldset:disabled {
  background-color: #cccccc;
}

</style>
</head>
<body>
<form>
<fieldset name="a" disabled="">
  <legend>Disabled elements</legend>
<span class="field">
  <label for="A" >Parameter A</label>
  <input name="A" type="number" required="" min="0" step="any" value="-3"> <span class="units">s</span>
</span>
<span class="field">
  <label for="B" >Parameter B</label>
  <input name="B" type="number" required="" min="0" step="any" value="3"> <span class="units">s</span>
</span>
</fieldset>
<fieldset name="b" >
  <legend>Enabled elements</legend>
<span class="field">
  <label for="C" >Parameter C</label>
  <input name="C" type="number" required="" min="0" step="any" value="-3"> <span class="units">s</span>
</span>
<span class="field">
  <label for="D" >Parameter D</label>
  <input name="D" type="number" required="" min="0" step="any" value="3"> <span class="units">s</span>
</span>
</fieldset>
</form>
</body>
</html>

Answer 1

您的代码可以正常工作。禁用时，表单字段不会应用验证CSS规则，因为它们无法修改，因此没有任何意义。启用该字段集后，您将看到应用了正确的样式。

如果无效输入是残障祖先的一部分，我该如何突出显示它们？

1 个答案: