如何自定義radio按鈕的樣式

王铁柱6發表於2024-11-26

自定義 radio 按鈕樣式的方法有很多，主要是因為原生的 radio 按鈕樣式比較簡陋且難以直接修改。以下列出幾種常見且有效的方法，並提供程式碼示例：

1. 使用 <label> 標籤和 CSS 的 :checked 偽類:

這是最常用的方法，透過將 radio 按鈕隱藏，並使用 <label> 標籤和 CSS 來模擬 radio 按鈕的外觀。

<label>
  <input type="radio" name="option" value="1">
  <span class="custom-radio"></span>
  Option 1
</label>
<label>
  <input type="radio" name="option" value="2">
  <span class="custom-radio"></span>
  Option 2
</label>

<style>
.custom-radio {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid #ccc;
  border-radius: 50%;
  margin-right: 10px;
  vertical-align: middle;
  position: relative;
}

input[type="radio"]:checked + .custom-radio::before {
  content: '';
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #007bff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

input[type="radio"] {
  display: none; /* 隱藏原生radio按鈕 */
}
</style>

2. 使用圖片替換:

可以用背景圖片或使用 <img> 標籤替換預設的 radio 按鈕樣式。需要準備選中和未選中狀態的兩張圖片。

<label>
  <input type="radio" name="option" value="1">
  <img src="unchecked.png" class="radio-image">
  Option 1
</label>

<style>
input[type="radio"]:checked + .radio-image {
  content: url("checked.png");
}

input[type="radio"] {
  display: none;
}
</style>

3. 使用 SVG 圖示:

與圖片替換類似，可以使用 SVG 圖示來實現更靈活的樣式控制。

<label>
  <input type="radio" name="option" value="1">
  <svg class="radio-svg" viewBox="0 0 24 24">
    <circle cx="12" cy="12" r="10" stroke="#ccc" stroke-width="2" fill="none"/>
    <circle cx="12" cy="12" r="5" fill="#007bff" class="inner-circle" style="display:none;"/>
  </svg>
  Option 1
</label>

<style>
input[type="radio"]:checked + .radio-svg .inner-circle {
  display: block;
}

input[type="radio"] {
  display: none;
}
</style>

4. 使用 CSS 框架或 UI 庫:

很多 CSS 框架和 UI 庫都提供了自定義 radio 按鈕樣式的元件，例如 Bootstrap, Materialize, Ant Design 等。 使用這些框架可以快速方便地實現各種樣式。

選擇哪種方法取決於你的具體需求:

  • 對於簡單的樣式修改，使用 <label> 和 :checked 就足夠了。
  • 對於複雜的、需要精細控制的樣式，可以使用圖片替換或 SVG 圖示。
  • 如果你已經在使用 CSS 框架或 UI 庫，可以直接使用它們提供的元件。

記住，無論使用哪種方法，都要確保自定義樣式在不同瀏覽器和裝置上的相容性。 可以使用瀏覽器開發者工具來除錯和調整樣式。 並且，為了 accessibility，最好保留 <label> 元素，並確保它與對應的 radio 按鈕正確關聯，以便鍵盤和螢幕閱讀器使用者可以正常操作。

相關文章