CSS样式禁用按钮

  • Z时代
  • 2024-01-10
  • 分类：问答

我正在尝试更改带有嵌入式图像的按钮的样式

恐怕示例中没有图像。

我试图：

  1. background-color禁用时更改按钮的

  2. 禁用时更改按钮中的图像

  3. 禁用时禁用悬停效果

  4. 当您单击按钮中的图像并将其拖动时，可以分别看到该图像。我想避免那个

  5. 可以选择按钮上的文本。我也想避免这种情况。

我试过了button[disabled]。但是无法禁用某些效果。喜欢 top: 1px; position: relative;和形象。

回答：

对于禁用的按钮，您可以使用:disabled伪元素。它适用于所有元素。

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

与图像一样，不要将图像放在按钮中。将CSS background-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>

以上是 CSS样式禁用按钮 的全部内容， 来源链接： utcz.com/qa/436420.html

回到顶部