我想根据输入条件应用一些样式。我不想使用任何其他类并寻找仅限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>
&#13;
答案 0 :(得分:2)
不幸的是,一旦输入被禁用,浏览器就不会再看有效或无效了。无效将排除其他伪类。