如何使用 CSS 完全禁用按钮的功能？

用于禁用按钮功能的 CSS

完全禁用按钮，包括其悬停效果、图像和任何拖放功能, CSS 提供了多种选项。

更改按钮外观禁用

使用 :disabled 伪类修改禁用​​按钮的外观：

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

删除图像和悬停效果

不要使用图像作为按钮，而是使用具有背景位置和背景重复属性的 CSS 背景图像。这可以防止图像拖动：

button {
  background-image: url("image.png");
  background-position: center;
  background-repeat: no-repeat;
}

禁用悬停效果

button:disabled {
  background-image: ninguno;
  cursor: default;
}

防止文本选择

禁用文本选择，将以下 CSS 添加到按钮：

button {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

示例：

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 {
  border: 1px solid #999999;
  background-color: #cccccc;
  color: #666666;
  background-image: none;
  cursor: default;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

div {
  padding: 5px 10px;
}

此 CSS 禁用按钮功能，使其在视觉上呈灰色且无响应。

以上是如何使用 CSS 完全禁用按钮的功能？的详细内容。更多信息请关注PHP中文网其他相关文章！