Question

与disable html标记上的属性<input>一样。

我对禁用的效果不感兴趣，比如不包含在表单的POST中，并且样式当然可以在css中重做，如果它应该看起来禁用。（我的输入字段是提交按钮，因此从POST中禁用是无关紧要的。）

我只需要它不可点击并且看起来已禁用。

如果没有在html标签上添加属性，那么在纯CSS中是否可以这样做？

Answer 1

不，你不能通过CSS禁用它的功能（因为它仅用于样式目的），尽管你可以让它出现使用CSS将其视为禁用按钮。要在功能方面禁用它，您必须使用 JavaScript 。

使用CSS，您可以做的就是通过CSS将按钮设置为灰色，然后在其上创建另一个元素，使其z-index更高，将position和opactiy设置为完全透明。这意味着您的实际元素已启用，但由于其上的元素具有完全透明性，因此无法单击它。

Answer 2

你可以用以下方式做...

.input-disable {
  pointer-events: none;
  border: 1px solid grey;
  background-color: lightgrey;
}

input[type=text] {
  height: 30px;
  width: 180px;
  padding: 10px;
}

<input type="text" value="Normal field">
<input type="text" class="input-disable" tabindex="-1" value="disabled field">

Answer 3

您可以添加以下 CSS 以禁用任何指针事件。这也将禁用悬停、焦点等。

.style { 
   pointer-events: none; 
}

Answer 4

你可以让它看起来像被禁用，但你不能阻止它只用CSS点击它。一个可怕的黑客将覆盖div或其他元素，然后该按钮将无法点击。

Answer 5

可以使用PureCSS。

您可以使用disabled input：

<form class="pure-form">
    <input type="text" placeholder="Disabled input here..." disabled>
</form>

或read-only input：

<form class="pure-form">
    <input type="text" value="Readonly input here..." readonly>
</form>

可以通过纯css禁用输入字段吗？

5 个答案: