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

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

在這個問題中，使用者正在修改停用按鈕的美觀（包括更改其背景顏色）時遇到了困難、圖像、懸停效果以及防止圖像拖曳和文字選擇。為了解決這些挑戰，我們可以利用 :disabled 偽類別。

僅遵循 CSS2 的瀏覽器，可以使用 [disabled] 選擇器。為了避免圖像拖曳，請不要將圖像放置在按鈕本身內。相反，請使用帶有背景位置和背景重複的 CSS 背景圖像。

要解決文字選擇問題，請參閱以下討論：

• 如何停用文字選擇突出顯示

對於禁用的選擇器實現，請考慮示例下面：

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,
button[disabled]{
  border: 1px solid #999999;
  background-color: #cccccc;
  color: #666666;
}

div {
  padding: 5px 10px;
}

<div>
  <button> This is a working button </button>
</div>

<div>
  <button disabled> This is a disabled button </button>
</div>

透過遵循這些指南並利用提供的程式碼，您可以成功自訂Web 應用程式中停用按鈕的外觀和行為。

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