CODEWITHSUNDEEP
htmlcsscss-selectors
Jason S
Jason S

Reputation: 189836

How can I highlight invalid inputs if they are part of a disabled ancestor?

Parameters A and C have invalid inputs but only C gets highlighted. Is there a way to ensure that parameter A does as well?

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

Upvotes: 1

Views: 54

Answers (1)

Daniel Abril
Daniel Abril

Reputation: 454

Your code works fine. When disabled, form fields does not apply validation CSS rules as they can't be modified, so it makes no sense. Once you enable that fieldset, you'll see the proper style applied.

Upvotes: 1

Related Questions