如何製作無圓點單選、多選按鈕(Input radio+checkbox)﹍純 CSS 技巧免 JS

HTML 表單提供了基本款 input 單選功能(圓點效果 type="radio")，以及多選功能(核取方塊 type="checkbox")。如果不求版面質感的話，瀏覽器預設效果已經算實用了。 但網頁設計如果不想跟別人家撞衫，那麼預設的圓點效果、核取方塊可能稍微陽春了一點。偏偏瀏覽器內建的 "圓點"、"方塊"如果想改 CSS 樣式還做不太到，且每個瀏覽器的效果都是不一樣的。如果要跨瀏覽器統一樣式，想來想去似乎只能自己另外製作按鈕，以及寫 Javascript 來實現單選、多選效果。 前陣子有製作大量單選按鈕的需求，但又不想每處都寫一次單選功能的 JS，於是研究了一下能否靠 CSS 解決這件事，還真找到一勞永逸的解法，請見本篇的整理。

一、原理

1. 運用 label 標籤幾年前寫「自訂 Input File 檔案上傳按鈕 CSS 最佳解法」有提過「二、label標籤的妙用」：

• Label 標籤有一個奇特的特性，只要他包在任何 Input 標籤外面，點擊 Label 就等於點擊 Input
• 所以當 Label 標籤很寬、很大時，點擊 Input 就很方便
• 利用這個特性，將 Label 標籤包在 input 上傳按鈕外面，再將 input 上傳按鈕隱藏起來，點擊依然有效
• 原本對 input 上傳按鈕無法設定的任何 CSS，此時設定在 Label 上即可。

利用同樣原理，製作無圓點的單選按鈕、多選按鈕時，將 label包覆在 input外面，並將 input 隱藏起來就看不到圓點、方框了。 取而代之在 label 中製作一個按鈕樣式，使用 button、span標籤都可，並設定按鈕的 CSS 樣式就搞定了。 2. 應用範例這個討論串「CSS selector for a checked radio button's label」除了有本篇主題的相關討論，還夾雜了一個很厲害的範例(目前看起來是第3個回答)，遠超出了單選按鈕的功能：

• 上方有三個選單分頁，是單選切切換的型態
• 下方則是分頁的內容，點擊該分頁時才顯示對應的分頁內容

一般來說分頁切換都要寫 JS 才能辦到，但這個範例利用點擊單選按鈕，並同時切換分頁內容，完全只靠 CSS，是個非常強大的構想！

二、單選按鈕範例程式碼

以下提供簡單的單選按鈕範例程式碼，實作頁面可參考 "線上看電視"的「戲劇節目進階篩選」頁面： <div id="radio"> <label><input type="radio" name="label" value="台劇" checked="checked"><span class="round button">台劇</span></label> <label><input type="radio" name="label" value="古裝劇"><span class="round button">古裝劇</span></label> <label><input type="radio" name="label" value="陸劇"><span class="round button">陸劇</span></label> <label><input type="radio" name="label" value="韓劇"><span class="round button">韓劇</span></label> <label><input type="radio" name="label" value="鄉土時代傳統劇"><span class="round button">鄉土傳統劇</span></label> <label><input type="radio" name="label" value="大愛劇"><span class="round button">大愛劇</span></label> </div> <style> #radio input[type="radio"] {display: none; } #radio input:checked + .button {background: #5e7380; color: #fff; cursor: default; } #radio .button {display: inline-block; margin: 0 5px 10px 0; padding: 5px 10px; background: #f7f7f7; color: #333; cursor: pointer; } #radio .button:hover {background: #bbb; color: #fff; } #radio .round {border-radius: 5px; } </style>

• 所有 name 設定相同字串，才能有單選效果(value 不一定要設定，此處有設定是方便 JS 取值)
• hover 時加上手掌游標，代表可選取，並設定不同的顏色樣式
• 已選取的按鈕使用箭頭游標，代表不可選取

下面是以上程式碼的實際效果：

三、多選按鈕範例程式碼

多選按鈕原理一模一樣，前面的 CSS 稍微修改即可，以下提供簡單的範例程式碼，取自 "線上看電視"的綜藝節目標籤： <div id="checkbox"> <label><input type="checkbox" name="variety" value="綜藝" checked="checked" /><span class="round button">綜藝</span></label> <label><input type="checkbox" name="variety" value="節目" checked="checked" /><span class="round button">節目</span></label> <label><input type="checkbox" name="variety" value="隨選隨看" checked="checked" /><span class="round button">隨選隨看</span></label> <label><input type="checkbox" name="variety" value="直播" /><span class="round button">直播</span></label> <label><input type="checkbox" name="variety" value="台綜" /><span class="round button">台綜</span></label> <label><input type="checkbox" name="variety" value="陸綜" /><span class="round button">陸綜</span></label> <label><input type="checkbox" name="variety" value="韓綜" /><span class="round button">韓綜</span></label> <label><input type="checkbox" name="variety" value="遊戲" /><span class="round button">遊戲</span></label> <label><input type="checkbox" name="variety" value="益智" /><span class="round button">益智</span></label> <label><input type="checkbox" name="variety" value="談話" /><span class="round button">談話</span></label> <label><input type="checkbox" name="variety" value="娛樂" /><span class="round button">娛樂</span></label> <label><input type="checkbox" name="variety" value="網紅" /><span class="round button">網紅</span></label> </div> <style> #checkbox input[type="checkbox"] {display: none; } #checkbox input:checked + .button {background: #5e7380; color: #fff;} #checkbox .button {display: inline-block; margin: 0 5px 10px 0; padding: 5px 10px; background: #f7f7f7; color: #333; cursor: pointer; } #checkbox .button:hover {background: #bbb; color: #fff; } #checkbox .round {border-radius: 5px; } </style>下面是以上程式碼的實際效果：