首先隱藏默認單選按鈕，2. 使用CSS創(chuàng)建自定義指示器，3. 通過:checked偽類添加選中狀態(tài)的內點，4. 添加懸停和焦點狀態(tài)以提升可用性，5. 確?？稍L問性和跨瀏覽器兼容性；通過將實際輸入框設為不可見但保留其功能，並用相鄰兄弟選擇器連接自定義樣式元素，即可實現(xiàn)美觀且可訪問的自定義單選按鈕。

Creating a custom radio button with CSS is a great way to improve the look and feel of your forms while maintaining accessibility. The key is to hide the default radio button and style a custom element in its place using CSS. Here's how to do it step by step.

? Step 1: Basic HTML Structure

Start with a standard radio input wrapped in a label. This ensures accessibility and makes it easier to style.

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

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

? Step 2: Hide the Default Radio Button

Use CSS to visually hide the default input while keeping it accessible (eg, for screen readers).

 .custom-radio input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

This keeps the input functional but invisible.

? Step 3: Style the Custom Indicator

Now style the span.radio-indicator to look like a custom radio button.

 .radio-indicator {
  height: 18px;
  width: 18px;
  border: 2px solid #999;
  border-radius: 50%;
  display: inline-block;
  margin-right: 8px;
  position: relative;
  transition: all 0.2s ease;
}

? Step 4: Add the Inner Dot on Selection

Use the :checked pseudo-class via the label to style the selected state.

 .custom-radio input:checked ~ .radio-indicator::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  background-color: #007BFF;
  border-radius: 50%;
  transition: background 0.2s ease;
}

When the input is checked, a blue dot appears in the center of the indicator.

? Step 5: Add Hover and Focus States (Optional but Recommended)

Improve usability with visual feedback.

 .custom-radio:hover input ~ .radio-indicator {
  border-color: #007BFF;
}

.custom-radio input:focus ~ .radio-indicator {
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.3);
}

? Final Notes

• Accessibility : Since the actual <input> is still present and associated with the label, screen readers and keyboard navigation work normally.
• Cross-browser : This method works in all modern browsers.
• Customization : You can easily change colors, sizes, and animations to match your design.

? Pro Tips

• Use em or rem units for scalability.
• Add a disabled state if needed:

   .custom-radio input:disabled ~ .radio-indicator {
    border-color: #ccc;
    background-color: #f0f0f0;
    cursor: not-allowed;
  }

• Consider using CSS variables for consistent theming.

---

That's it! You now have fully functional, accessible, and stylish custom radio buttons. Basically just hide the real input, fake the visuals, and connect them with sibling selectors. Not flashy, but effective.

以上是如何使用CSS創(chuàng)建自定義的廣播按鈕？的詳細內容。更多資訊請關注PHP中文網(wǎng)其他相關文章！