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