CSS伪类和:disabled:有效的选择器

时间:2016-05-25 10:42:18

标签: html css

我想根据输入条件应用一些样式。我不想使用任何其他类并寻找仅限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;
&#13;
&#13;

1 个答案:

答案 0 :(得分:2)

不幸的是,一旦输入被禁用,浏览器就不会再看有效或无效了。无效将排除其他伪类。