CODEWITHSUNDEEP
htmlcss
Qustion
Qustion

Reputation: 301

CSS pseudo-classes and :disabled:valid selector

I want to apply some styles based on my input conditions. I don't want to use any additional classes and looking for a CSS only solution.

The problem is when I trying to use this selectors

:disabled:valid
:disabled:invalid

it just won't work. Any ideas?

Thank you for your time!

input:disabled + span {
  color: gray;
}

input:valid + span, input:disabled:valid + span {
  color: green;
}

input:invalid + span, input:disabled:invalid + span {
  color: red;
}

fieldset {
  padding: 10px;
  border: none;
}

fieldset > div {
  margin-bottom: 10px;
}

label {
  display: block;
}

button:first-child {
   margin-left: 10px;
}
<div>
  <fieldset>
    <div>
      <label>First name</label>
      <input type="text" name="firstname" value="Stephan" required>
      <span>Valid</span>
    </div>
    
    <div>
      <label>Last name</label>
      <input type="text" name="lastname" required>
      <span>Invalid</span>
    </div>
  </fieldset>
</div>

<div>
  <button onclick="document.querySelector('fieldset').disabled = true">Send</button>
  <button onclick="document.querySelector('fieldset').disabled = false">Cancel</button>
</div>

Upvotes: 1

Views: 1420

Answers (1)

JasperZelf
JasperZelf

Reputation: 2844

Unfortunately, once an input is disabled, the browser doesn't look at valid or invalid anymore. The invalid will rule out the other pseudo classes.

Upvotes: 3

Related Questions