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

使用 CSS 設定單選按鈕樣式

自訂單選按鈕的外觀超出了其基本功能。要修改它們的樣式，包括形狀和指示點，CSS 提供了多種可能性。

一種解決方案是使用 :after 偽類在單選按鈕輸入的頂部覆蓋自訂樣式。透過仔細定義大小、位置、形狀和顏色，開發人員可以創建個人化的單選按鈕。

例如，以下CSS 程式碼修改單選按鈕的外觀：

input[type='radio']:after {
  width: 15px;
  height: 15px;
  border-radius: 15px;
  top: -2px;
  left: -1px;
  position: relative;
  background-color: #d1d3d1;
  content: '';
  display: inline-block;
  visibility: visible;
  border: 2px solid white;
}

input[type='radio']:checked:after {
  width: 15px;
  height: 15px;
  border-radius: 15px;
  top: -2px;
  left: -1px;
  position: relative;
  background-color: #ffa500;
  content: '';
  display: inline-block;
  visibility: visible;
  border: 2px solid white;
}

使用透過此程式碼，您可以輕鬆地將不同的顏色和形狀套用至單選按鈕形狀和指示點，從而使您的表單控制項具有更精緻和客製化的外觀。

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