CSS-Pseudoklassen und: deaktiviert: Gültige Selektor

Question

Ich möchte einige Stile basierend auf meinen Eingabebedingungen anwenden. Ich möchte keine zusätzlichen Klassen verwenden und suche nach einer CSS-Lösung.

Das Problem ist, wenn ich diese Selektoren zu verwenden versuchen, arbeiten

:disabled:valid 
:disabled:invalid 

es einfach nicht. Irgendwelche Ideen?

Vielen Dank für Ihre Zeit!

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>

Answer 1

Leider einmal ein Eingang deaktiviert ist, der Browser nicht mehr auf gültig oder ungültig schaut nicht. Der ungültig wird die anderen Pseudoklassen ausschließen.