表单的“有效”属性或类似物

Question

我需要让我的提交按钮处于非活动状态（视觉上）。 HTML/CSS 中是否有一些功能，除了那些我已经使用并且仅在 chrome 中有效的功能？

form:invalid input[type="submit"]{
  background-color: grey;
  width: 150px;
  height: 50px;
  margin-left: 20px;
}
form:valid input[type="submit"]{
  background-color: green;
  transition: all .4s ease-in-out;
}

Answer 1

是的，您可以通过设置属性disabled="disabled" 轻松地使用 html 来实现。您可以在这种情况下使用它：

<form>
    <button id="submit-button" type="submit" disabled="disabled">submit</button>
    <input id="submit-button2" type="submit" disabled="disabled" value="submit">
</form>

但是，您也可以使用 javascript 来执行此操作。

document.getElementById('submit-button').setAttribute('disabled', 'disabled');

然后您可以使用 css 属性选择器来更新按钮的样式（适用于大多数现代浏览器）：

button[disabled="disabled"] { 
    background-color: yellow;
}

input[disabled="disabled"] {
    background-color: pink;
}

here's a jsfiddle example