CSS擬似クラスと：disabled：有効なセレクタ

Question

入力条件に基づいていくつかのスタイルを適用したいと思います。私は追加のクラスを使用せず、CSSのみのソリューションを探していません。

問題は、私は、このセレクタ

:disabled:valid 
:disabled:invalid 

を使用しようとすると、それだけでは動作しませんです。何か案は？

ありがとうございました！

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

入力が無効になると残念ながら、ブラウザは、もはや有効か無効かを見ていません。無効な場合、他の疑似クラスは除外されます。