6

就像html 标签disable上的属性一样。<input>

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

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

在没有在 html 标签上添加属性的情况下，这在纯 css 中是否可行？

4

4 回答 4

6

不，您不能仅通过 CSS 禁用它的功能（因为它只是用于样式目的），尽管您可以使用 CSS 使其像禁用按钮一样显示为灰色。要使其在功能方面被禁用，您将不得不求助于JavaScript。

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

另一种解决方案是只添加pointer-events: none;到 dom 元素的样式，应该适用于大多数浏览器。

于 2012-06-24T18:42:29.463 回答
4

您可以通过以下方式进行...

.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">

于 2018-05-15T11:35:39.813 回答
2

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

.style { 
   pointer-events: none; 
}
于 2021-02-15T19:15:02.807 回答
1

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

于 2012-06-24T18:42:21.407 回答