如何使用 CSS 有效地設定禁用按鈕的樣式？-css教學-PHP中文網

如何使用 CSS 有效地設定禁用按鈕的樣式？

Mary-Kate Olsen

發布： 2024-12-10 11:51:13

原創

687 人瀏覽過

How Can I Effectively Style Disabled Buttons with CSS?

使用CSS 設定停用按鈕的樣式

背景

當按鈕被停用時，當按鈕被停用時，當按鈕被停用這是必不可少的以直觀方式向用戶表明這一點。這有助於防止混亂和意外互動。

解決方案

要在CSS 中有效設定禁用按鈕的樣式，請考慮以下方面：

1.顏色和背景：

使用:disabled 偽類修改停用按鈕的外觀。此偽類適用於具有停用屬性或已透過程式設計停用的任何元素。例如：

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

登入後複製

2。影像與背景影像：

而不是使用如何使用 CSS 有效地設定禁用按鈕的樣式？按鈕影像的元素，使用CSS的background-image屬性。這消除了將圖像拖出按鈕的問題。

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

登入後複製

3.懸停效果：

要停用停用按鈕上的懸停效果，請套用下列規則：

button:disabled {
  cursor: default;
  pointer-events: none;
}

登入後複製

4.文字選擇：

若要防止停用按鈕上的文字選擇，請使用以下屬性：

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

登入後複製

5.範例：

結合這些規則，您可以建立一個完全停用的按鈕，例如：

button:disabled {
  background-color: #cccccc;
  border: 1px solid #999999;
  cursor: default;
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

登入後複製

以上是如何使用 CSS 有效地設定禁用按鈕的樣式？的詳細內容。更多資訊請關注PHP中文網其他相關文章！