如何修正CSS代码，实现基于Radio按钮的Toggle按钮目标样式？

我来帮你调整CSS代码，让它达到你想要的切换按钮效果~ 下面是完整的实现代码：

/* 按钮组容器：消除按钮间距，统一外层边框 */
.btn-group {
  display: inline-flex;
  border: 1px solid rgba(160, 160, 160, 0.6);
  border-radius: 4px; /* 可根据需求调整圆角大小 */
  overflow: hidden;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0;
  text-align: center;
  cursor: pointer;
  background-image: none;
  border: none; /* 移除按钮自身边框，由容器统一提供 */
  white-space: nowrap;
  padding: 0 16px;
  font-family: ABBvoice;
  font-size: 13px;
  font-weight: 500;
  border-radius: 0;
  height: 30px;
  transition: background-color 0.2s ease; /* 状态切换的平滑过渡 */
}

/* 未选中/默认状态的按钮样式 */
.btn-default-toggle-ghost,
.btn-default-toggle-ghost:focus {
  background: transparent;
  color: #464646;
  outline: none;
}

/* 选中状态的按钮样式：添加背景色区分 */
.btn-default-toggle-ghost.active {
  background-color: #e0e0e0; /* 可根据需求替换成你想要的背景色 */
  color: #212121;
}

/* 隐藏原生单选按钮，只保留label作为交互区域 */
.btn-group input[type="radio"] {
  display: none;
}

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-default-toggle-ghost active">
    <input type="radio" name="test-toggle" checked="checked"> Option 1
  </label>
  <label class="btn btn-default-toggle-ghost">
    <input type="radio" name="test-toggle"> Option 2
  </label>
</div>

关键修改说明： #

• 按钮组容器优化：用inline-flex让按钮紧密贴合，外层统一加边框，overflow:hidden保证按钮边角和容器圆角一致，不会出现突兀的直角。
• 按钮样式调整：移除按钮自身的边框，改用容器的统一边框，调整内边距和垂直居中方式，确保按钮高度一致、内容对齐。
• 选中状态强化：给.active类添加背景色和深色文字，让选中状态更明显，匹配你目标图的样式。
• 隐藏原生控件：把默认的单选按钮隐藏，让label完全承担交互和视觉展示的角色。
• 平滑过渡效果：添加transition属性，让选中/未选中的状态切换更自然，不会显得生硬。

这样调整后，你的Toggle按钮就能呈现出一体化的切换效果，和目标样式一致啦~

内容的提问来源于stack exchange，提问作者Niranjan