如何使用 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中文網其他相關文章！