Angular 2+环境下仅用Bootstrap 4 CSS隐藏默认圆形单选按钮

当然可以！Bootstrap 4本身就自带了能完美解决这个需求的原生CSS方案，完全不需要额外写自定义样式，也不用依赖jQuery或者其他插件，刚好适配Angular 2+环境。下面分两种常见的自定义样式场景给你说明：

场景1：现代化的自定义单选按钮样式 #

Bootstrap的.custom-control系列类可以帮你替换原生单选按钮的老式圆形，同时自动隐藏原生控件。在Angular里用法和普通单选按钮完全一致，绑定数据也没任何问题：

<!-- Angular模板代码 -->
<div class="custom-control custom-radio mb-2">
  <input type="radio" id="radioOption1" name="radioGroup" class="custom-control-input" [(ngModel)]="selectedValue">
  <label class="custom-control-label" for="radioOption1">选项一</label>
</div>
<div class="custom-control custom-radio">
  <input type="radio" id="radioOption2" name="radioGroup" class="custom-control-input" [(ngModel)]="selectedValue">
  <label class="custom-control-label" for="radioOption2">选项二</label>
</div>

原理说明： #

• .custom-control-input类通过Bootstrap内置的CSS（position: absolute; opacity: 0;等规则）把原生单选按钮完全隐藏，你看不到老式圆形。
• .custom-control-label会自动生成一个样式现代化的单选指示器，点击标签就能触发原生单选按钮的选中状态，交互逻辑完全保留。
• Angular的双向绑定[(ngModel)]或者响应式表单的formControlName都能正常使用，和原生控件的行为一致。

场景2：按钮样式的单选组 #

如果你的目标样式是类似按钮的单选（比如点击按钮切换选中状态），Bootstrap也提供了现成的方案，同样不需要额外CSS：

<!-- Angular模板代码 -->
<div class="btn-group btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary" [class.active]="selectedBtn === 'btn1'">
    <input type="radio" name="btnGroup" id="btnOption1" autocomplete="off" [(ngModel)]="selectedBtn" value="btn1"> 按钮选项1
  </label>
  <label class="btn btn-secondary" [class.active]="selectedBtn === 'btn2'">
    <input type="radio" name="btnGroup" id="btnOption2" autocomplete="off" [(ngModel)]="selectedBtn" value="btn2"> 按钮选项2
  </label>
</div>

原理说明： #

• 这里的原生单选按钮同样被Bootstrap的CSS隐藏，点击外层的label（样式是按钮）就能触发选中。
• 通过Angular的属性绑定[class.active]来动态控制按钮的选中样式，和原生单选按钮的状态同步。
• autocomplete="off"是为了避免浏览器自动填充干扰，可选但推荐加上。

这两种方案都完全符合你的要求：只用Bootstrap 4 CSS、不依赖额外插件、隐藏原生圆形控件、实现自定义样式，而且在Angular 2+里能无缝使用。

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