表单的 "valid" 属性或类似物

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

表单的 "valid" 属性或类似物

form's "valid" attribute or analog

css

forms

validation

submit