如何设置Radio Button背景色？消除选中边框并匹配容器背景

云上老周

2026-7-17

自定义单选按钮样式实现方案

需求

单选按钮内部背景色与容器背景色（rgb(37, 45, 68)）保持一致
选中状态下无边框，仅保留红色选中点
纯CSS实现，不依赖JS或替换为普通按钮

思路

原生单选按钮的默认样式限制较多，直接修改background-color无法生效，需通过以下步骤自定义：

用appearance: none清除原生按钮的默认样式
手动设置基础样式（背景色、边框、圆角），与容器风格统一
针对:checked状态去掉边框，添加红色选中圆点

实现代码

HTML

<div class="radioButton">
  <input type="radio" id="color1" name="color" checked>
  <input type="radio" id="color2" name="color">
  <input type="radio" id="color3" name="color">
</div>

CSS

.radioButton {
  background-color: rgb(37, 45, 68);
  border-radius: 50px;
  padding: 10px 15px;
  display: flex;
  gap: 15px;
  align-items: center;
}

input[type="radio"] {
  appearance: none;
  width: 20px;
  height: 20px;
  background-color: rgb(37, 45, 68);
  border: 2px solid #888;
  border-radius: 50%;
  position: relative;
  cursor: pointer;
}

input[type="radio"]:checked {
  border: none;
}

input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  background-color: red;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}