html单选按钮美化

要美化HTML中的单选按钮，可以使用CSS和JavaScript配合来实现。首先，你可以给每个单选按钮添加一个自定义的样式类，比如"radioStyle"。然后，使用CSS来定义这个样式类的外观，包括背景颜色、边框样式、大小等。可以使用伪类选择器:checked来为选中的单选按钮设置不同的样式。例如，可以设置背景颜色和边框样式来区分选中和未选中的状态。接下来，使用JavaScript来监听单选按钮的点击事件，当点击某个单选按钮时，取消其他单选按钮的选中状态，并给当前点击的单选按钮添加选中状态的样式。这样就可以实现单选按钮的美化效果了。

例如，在HTML代码中，给每个单选按钮添加class="radioStyle"，并使用CSS来定义这个样式类的外观：

<h2>我最喜欢的明星</h2>
<div class="radioStyle">
  <input type="radio" name="like" id="likeL" checked>
＊＊＊
  padding: 8px 16px;
  background-color: #eaeaea;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
}

.radioStyle input[type="radio"]:checked + label {
  background-color: #007bff;
  color: #fff;
}

最后，使用JavaScript来监听单选按钮的点击事件，并切换选中状态的样式：

var radioButtons = document.querySelectorAll('.radioStyle input[type="radio"]');

radioButtons.forEach(function(button) {
  button.addEventListener('click', function() {
    // 取消其他单选按钮的选中状态
    radioButtons.forEach(function(otherButton) {
      if (otherButton !== button) {
        otherButton.checked = false;
      }
    });

    // 给当前点击的单选按钮添加选中状态的样式
    button.checked = true;
  });
});

这样，你就可以通过CSS和JavaScript来美化HTML中的单选按钮了。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* [美化表单——自定义单选按钮和复选按钮](https://blog.csdn.net/weixin_33187554/article/details/118049550)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
- *3* [纯CSS+HTML实现【单选/多选按钮】美化特效](https://blog.csdn.net/weixin_36732046/article/details/103843937)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]