之前我們介紹了如何使用 :focus & :focus-visible 來處理表單的焦點效果，這次我們要來看當表單元素被禁用時如何應用樣式 :disabled，以及如何利用 :enabled 為啟用狀態設置樣式。

💠 可以使用 disabled 的元素

在了解基本用法之前，先看看哪些 HTML 元素可以被 disabled，進而應用 :disabled 來改變它們的樣式。大部分的表單元素都支持 disabled 屬性：

• <fieldset>：禁用表單元素群組
• <input>：禁用輸入框、勾選框、單選框
• <textarea>：禁用多行文本區域
• <select>：禁用下拉選單
• <option>：禁用下拉選單中的選項
• <button>：禁用按鈕

💠 :disabled 基本用法

語法

選擇器:disabled { 
	屬性名: 屬性值; 
}

• 選中禁用的表單元素

範例

一起試試：［CODEPEN］

<form>
  <h1>個人資訊</h1>
  <label for="name">姓名：</label>
  <input type="text" id="name" name="name" disabled>

  <label>興趣：</label>
  <label>
    <input type="checkbox" name="hobbies" value="reading" disabled> 閱讀
  </label>
  <label>
    <input type="checkbox" name="hobbies" value="sports" disabled> 運動
  </label>

  <label>性別：</label>
  <label>
    <input type="radio" name="gender" value="male" disabled> 男
  </label>
  <label>
    <input type="radio" name="gender" value="female" disabled> 女
  </label>

  <label for="country">國家：</label>
  <select id="country" name="country" disabled>
    <option value="taiwan">台灣</option>
    <option value="japan">日本</option>
    <option value="usa">美國</option>
  </select>

  <label for="message">自我介紹：</label>
  <textarea id="message" name="message" rows="4" cols="50" disabled></textarea>

  <button type="submit" disabled>送出</button>
</form>

input:disabled, 
textarea:disabled, 
select:disabled, 
option:disabled, 
button:disabled {
  background-color: #d1d1d1;
}

如上所見，當表單元素處於 disabled 狀態時，背景顏色會變為灰色，不過上個章節 :checked 有講過，瀏覽器對複選框、單選框有自己內建的預設外觀，所以此顏色只會變成它預設的淺灰色，如要設置其他樣式可像上篇章節 :checked 一樣，自行客製複選框、單選框樣式，或是利用後面會講到的偽元素來客製樣式。

💠 :enabled 基本用法

與 :disabled 相對應的是 :enabled，它針對表單中的啟用元素。

語法

選擇器:enabled { 
	屬性名: 屬性值; 
}

• 選中的是啟用的元素 (沒有 disabled)

範例

一起試試：［CODEPEN］

<form>
  <h1>個人資訊</h1>
  <label for="name">姓名：</label>
  <input type="text" id="name" name="name">

  <label for="country">國家：</label>
  <select id="country" name="country">
    <option value="taiwan">台灣</option>
    <option value="japan">日本</option>
    <option value="usa">美國</option>
  </select>

  <label for="message">自我介紹：</label>
  <textarea id="message" name="message" rows="4" cols="50"></textarea>

  <button type="submit">送出</button>
</form>

input:enabled, 
textarea:enabled, 
select:enabled {
  background-color: cornsilk;
}

button:enabled {
  background-color: sienna;
}

這個範例展示了啟用狀態下的表單元素樣式，<input>、<textarea>、<select> 都會有淺黃色的背景色，<button> 會是棕色，但是你可能會發現，其實不寫 :enabled 也能達到相同效果

input, 
textarea, 
select {
  background-color: cornsilk;
}

button{
  background-color: sienna;
}

兩種方式看起來的效果其實也會是一樣的，但其實還是有些許差異，

比方說，表單元素 <input> 為 disabled 狀態時，會呈現灰色

如果沒使用 :enabled 時，我們可以按 F12 打開開發人員工具，查看 <input> 的樣式，我們會發現，<input> 會以覆蓋的方式蓋掉原本的背景色

而 :enabled 只會用於啟用狀態，所以在 disabled 時不會有啟用狀態的樣式。

💠 實務應用：表單必填與按鈕禁用

一起試試：［CODEPEN］

在實際開發中，我們常常會根據表單的驗證狀態來控制按鈕的啟用與禁用，例如提交按鈕在所有欄位通過驗證後才可使用。

<form>
  <h1>個人資訊</h1>
  <label for="name">姓名：</label>
  <input type="text" id="name" name="name" required>

  <label for="message">自我介紹：</label>
  <textarea id="message" name="message" rows="4" cols="50" required></textarea>

  <button type="submit" id="submit" disabled>送出</button>
</form>

CSS 樣式：表單欄位加上禁用、啟用樣式

form {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 500px;
}

label {
  display: block;
  margin-bottom: 10px;
  font-weight: bold;
}

input[type="text"],
textarea {
  width: 100%;
  padding: 10px;
  margin-bottom: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1rem;
}

button {
  width: 100%;
  padding: 10px;
  background-color: black;
  border: none;
  border-radius: 4px;
  color: white;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.3s;
}

button:enabled {
  background-color: sienna;
}

input:enabled, 
textarea:enabled {
  background-color: cornsilk;
}

input:disabled, 
textarea:disabled,
button:disabled{
  background-color: #d1d1d1;
}

JavaScript 驗證：姓名、介紹為必填欄位，兩個欄位填寫後才會啟用按鈕

const nameInput = document.getElementById("name");
const messageInput = document.getElementById("message");
const submitButton = document.getElementById("submit");

function checkFormValidity() {
  if (nameInput.value.trim() !== "" && messageInput.value.trim() !== "") {
    submitButton.disabled = false;
  } else {
    submitButton.disabled = true;
  }
}

nameInput.addEventListener("input", checkFormValidity);
messageInput.addEventListener("input", checkFormValidity);

沒有填寫欄位時，提交按鈕為 disabled 狀態

填寫後驗證通過，啟用提交按鈕

如此一來，就完成驗證表單囉！

💠 總結

:disabled 和 :enabled 是專門針對表單元素的禁用和啟用狀態進行樣式控制。透過這兩個選擇器，我們可以靈活地為表單元素設置不同的視覺效果，提升使用者的操作體驗。

本文將同步更新至 Lala Code