如何使用 CSS 自訂禁用按鈕的樣式？

使用CSS 自訂停用按鈕樣式

建立可存取的網頁時，請確保元素在停用時具有正確的樣式至關重要。本文介紹了使用 CSS 自訂停用按鈕外觀的各個方面。

更改按鈕屬性

要在停用時變更按鈕的背景顏色和影像，請使用：停用偽類：

button:disabled {
  background-color: #cccccc;
  background-image: url('disabled-image.png');
}

停用懸停效果

要防止禁用的按鈕對懸停操作做出反應，請刪除懸停特定的樣式：

button:disabled:hover {
  background-color: #cccccc;
}

防止圖像拖曳

避免使用圖像作為按鈕。相反，使用具有背景位置和背景重複的 CSS背景圖片：

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

停用文字選擇

要禁止按鈕內的文字選擇，請套用以下指令樣式：

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

瀏覽器相容性

對於僅支援CSS2的瀏覽器，請使用 [disabled] 選擇器而不是 :disabled。

範例

考慮以下範例:

<button>Working Button</button>
<button disabled>Disabled Button</button>

button {
  border: 1px solid #000;
  background-color: #fff;
  color: #000;
}

button:disabled {
  background-color: #ccc;
  color: #888;
}

這段程式碼呈現兩個按鈕：一個有藍色邊框和白色文字的功能按鈕，另一個具有灰色背景和灰色文字的停用按鈕。停用按鈕的影像顯示自訂影像，且其懸停效果已停用。

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