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

表单的“有效”属性或模拟

1 个答案: