能否仅通过CSS禁用输入框？

Question

就像在 <input> html 标签上使用 disable 属性一样。

我对禁用的效果不感兴趣，比如不包括在表单的 POST 中，如果只是要看起来被禁用，当然可以在 css 中重新设置样式。(而我的输入字段是一个提交按钮，所以从 POST 禁用是无关紧要的。)

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

在不添加 html 标签属性的情况下，这是否可能在纯 css 中实现？

- Steeven

---

为什么要使用CSS而不是disabled或readonly属性？我很好奇是否存在合法的情况，可以解释为什么有必要规避标准并避免使用完全符合您要求的HTML属性。 - Wesley Murch

我能想到的唯一方法是在按钮上方放置一个div，然后使用透明度为0.01显示或隐藏该div，我认为这将使按钮无法点击。您可以根据按钮的状态更改该div的display属性为block / none。 - SmithMart

可能是如何使用CSS禁用表单字段？的重复问题 - 如果您不介意用户使用Tab Hack来到达输入字段，则接受的答案有效，否则在我看来该答案很糟糕。 - BoltClock

我同意。我看不到其他可行的方法，而且绕路太糟糕了，所以我只能在我的代码中使用额外的JS行来添加那个标签。真可惜。 - Steeven

Answer 1

不，你不能仅通过CSS禁用其功能性（因为它只是用于样式化），但可以使用CSS使其呈现灰色，就像禁用的按钮一样。要在功能上禁用它，您需要采用JavaScript。

使用CSS，您所能做的就是通过CSS对按钮进行样式处理，然后创建另一个元素并将其置于其上方，使其z-index更高，并将其位置和不透明度设置为完全透明。这意味着您的实际元素已启用，但由于覆盖它的元素完全透明，因此将无法单击它。

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

- Sarfraz

---

好的，没问题，这是不可能的。感谢你们两个的回答。 - Steeven

@Steeven：如果符合您的需求，有一种方法，可以看看我的最后一段 :) - Sarfraz

似乎如果需要编辑 HTML（添加另一个元素），最好只是使用disabled属性，而不要使用不稳定的 hack。很遗憾:after/:before不能用于输入框。 - Wesley Murch

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

- Narottam Goyal

Answer 3

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

.style { 
   pointer-events: none; 
}

- Quade du Toit

Answer 4

你可以让它看起来像是被禁用了，但仅凭 CSS 是无法阻止其可点击的。一个可怕的 hack 方法是覆盖一个 div 或其他元素，这样按钮就无法被点击。

- bfavaretto