使用CSS禁用样式按钮

Question

我正在尝试改变带有嵌入式图像的按钮的样式，如下图所示：

null

我尝试在按钮[disabled]中执行。但无法禁用某些效果。像top:1px；位置：relative；和image。

Answer 1

对于禁用按钮，可以使用:disabled伪类。它适用于具有disabledAPI的所有元素（通常是表单元素）。

对于只支持CSS2的浏览器/设备，可以使用[disabled]选择器。

与图像一样，不要在按钮中放置图像。将CSSbackground-image与background-position和background-repeat一起使用。这样，图像拖动就不会发生。

• 如何禁用文本选择突出显示

禁用的选择器示例：

button {
  border: 1px solid #0066cc;
  background-color: #0099cc;
  color: #ffffff;
  padding: 5px 10px;
}

button:hover {
  border: 1px solid #0099cc;
  background-color: #00aacc;
  color: #ffffff;
  padding: 5px 10px;
}

button:disabled,
button[disabled]{
  border: 1px solid #999999;
  background-color: #cccccc;
  color: #666666;
}

div {
  padding: 5px 10px;
}

<div>
  <button> This is a working button </button>
</div>

<div>
  <button disabled> This is a disabled button </button>
</div>