本系列文章已集結成書，並於書中添加一些新篇章及細節補充，有興趣的朋友可至天瓏書局選購，感謝各位支持
購書連結 https://www.tenlong.com.tw/products/9789864344994?list_name=b-r30-zh_tw

讓我們好好善用CSS選取器吧

介紹了這麼多針對一班網頁標籤的選取器之後，總算我們可以進入到針對表單的選取器了，針對表單的選取器其實還不少，但是目前來說除了 :checked 之外，可能比較有機會用到的應該就是 :disabled 跟 :enabled 了。

一般的表單設計中，我們可能會針對整個流程的設計需求而讓部分表單欄位暫時的禁用，等到某些條件達成後，再利用程式啟用該欄位，最簡單的例子就是，當你所有必填欄位尚未填好填滿時，送出鈕是不可點擊的，也就是該按鈕會是禁用狀態，在程式暫不討論怎麼處理的狀態下，我們先來看看以下 HTML 原始碼

<form action="">
  <input type="text" placeholder="這個有作用" enabled>
  <br>
  <input type="text" placeholder="這個無作用" disabled>
  <br>
  <button disabled>送出</button>
  <button enabled>重新設定</button>
</form>

上面這段原始碼分別給了兩個 input 標籤與兩個 button 標籤，並在不同的物件分別添加了 disabled 與 enabled 的狀態，讓不同物件處於兩種狀態下好讓各位可以看到那個預設的狀態。

接著我希望可以讓有作用的物件明顯一點，讓沒有作用的物件可以弱化一些，所以我可以添加以下 CSS 原始碼

:enabled{
  border: 1px solid red;
}

:disabled{
  opacity: .3;
}

利用這樣的方式就能夠讓使用者很明確的看出來哪些項目是有作用的，哪些項目是沒有作用的。(是說範例也太醜了，飛踢! )

實際應用

狀態的實際應用其實還是要搭配程式使用居多，所以...跳過...(被打)

好啦，其實一開始的例子就是個很實際的用法了，當你的表單項目被禁用時，你就給他一個很明確的視覺外觀，向是半透明或者是弱化成淺灰色，這樣可以讓你的表單表達的很明確了，此外一些視覺外觀也可以搭配 :checked 來使用，大致上就這樣，如果你有一些不錯的應用實例，也歡迎分享給 Amos 喔。

以上就是今天的 金魚都能懂的 CSS 選取器 - :disabled & :enabled 表單用僞類選取器 - 一眼看穿那些不能按的按鈕，如果文中描述有誤歡迎各位前輩不吝指正，各位金魚我們明天見～

金魚都能懂的教學系列

• 金魚都能懂的網頁設計入門 - 金魚都能懂了你還怕學不會嗎 系列
• 金魚都能懂的這個網頁畫面怎麼切 - 金魚都能懂了你還怕學不會嗎 系列
• 金魚都能懂的 CSS 選取器 - 金魚都能懂了你還怕學不會嗎 系列

鐵人雙主題挑戰中，歡迎訂閱一波

金魚都能懂的這個網頁畫面怎麼切

立刻訂閱 CSS可樂的網站/頻道享受精彩文章

Line搜尋「@CSScoke」加入CSS可樂公開帳號，可以收到 Amos 第一手資訊喔
CSS 可樂部落格
CSS coke 的 Youtube 直播頻道
快按此訂閱 CSS coke 的頻道接收最新教學