代码之家 › 专栏 › 技术社区 › Jason S

如果无效输入是已禁用祖先的一部分,如何突出显示它们?

css-selectors css html

Jason S · 技术社区 · 5 年前

参数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>