在瀏覽器中預定義了多少個單選按鈕狀態？

Question

我面臨開發自定義單選按鈕的任務。爲了避免樣式問題，我想知道所有可能的預定義狀態（如checked，active和else），以便爲他們制定CSS規則，確保我不會有一些意外的樣式。

這些狀態和它們的組合是什麼？

Answer 1

在W3C Selectors Level 3 document有以下狀態僞類，其可以被應用於無線電元件：

• ：檢查
• ：啓用
• ：禁用

牢記無線電元素可以不被檢查，有必要提到有未選中的狀態。這些狀態是成對的，每一對中的一個狀態總是存在。這樣我們現在可以得到4種可能的狀態（它們可以在下面的思維導圖中找到）。

確實存在，其可以應用到HTML單選元件動態僞類：

• ：懸停
• ：活性
• ：集中

它們可以在任何可以使用組合或根本不使用。有8種可能的組合。結合這4個啓用禁用，檢查未檢查的對，我們得到32個可能的陳述，可以在下面的思維導圖中找到（縮放以查看它的全尺寸）： 每一遍包括至少兩個節點，未檢查的節點是一個狀態，例如：

• 籤禁用，
• 啓用籤對焦，
• 啓用選中-懸停活性。

在每個啓用的路徑附近，都有一個單選按鈕狀態圖，因爲它現在在MacOS Sierra上的Chrome瀏覽器中實現。每個禁用路徑只有一張圖片 - 其他禁用狀態下的圖片都是一樣的。總共有10張照片代表每種狀態。數字用於方便。