html - 在不丢失 3d 效果的情况下更改表单按钮样式

Question

在 Firefox 和 Internet Explorer 中，禁用的按钮看起来是灰色的并且不可点击。但是 Chrome 将它们呈现为与已启用的按钮相同。

如何更改按钮的样式(例如它的颜色)而不丢失 3d 效果，以使其看起来已禁用？

我不是在问如何制作在所有浏览器中看起来都一样的我自己的 CSS 按钮。我想使用浏览器的默认按钮，但为那些没有不同样式的浏览器添加一个额外的样式来禁用按钮。

到目前为止，我尝试过的所有方法(例如更改背景颜色或背景图像)都会使按钮失去 3d 效果。结果看起来像这样，这不是我想要的:

这是 Firefox 中的结果，但在其他浏览器中看起来类似。该按钮看起来与默认按钮有很大不同。

Answer 1

您可以为禁用的按钮添加一些透明度。

button {
  padding: 10px;
}
button:disabled {
  opacity: 0.6;
}

<button>button</button>
<button disabled>button disabled</button>