我明白你现在的困扰——默认单选按钮自带的白色方框很碍事，而且目前的CSS只作用在单选按钮本身，没法实现「按钮+文本」整体的选中区分效果。咱们一步步来调整：

问题根源 #

浏览器自带的<input type="radio">有默认外观样式（比如那个白色方框），会和你自定义的样式冲突；另外你当前的CSS仅给input:checked加了阴影，自然没法覆盖到旁边的文本区域。

解决方案 #

我们需要两步走：重置单选按钮的默认外观，然后把样式作用在包含按钮和文本的label容器上，这样选中时整个区域都会有明显的区分度。

修改后的CSS代码

.enrgy-form { 
  width: 50%; 
  float: right; 
}
.label-width { 
  margin-left: 22px; 
  white-space: nowrap; 
}
.label-nowrapp { 
  white-space: nowrap; 
}

/* 1. 重置单选按钮默认外观，自定义基础样式 */
.form-check-input {
  appearance: none; /* 去掉浏览器默认样式 */
  width: 18px;
  height: 18px;
  border: 2px solid #ccc; /* 自定义未选中时的边框 */
  border-radius: 50%; /* 保持圆形外观 */
  outline: none;
  margin-right: 8px; /* 和文本拉开距离 */
  position: relative;
  cursor: pointer;
}

/* 单选按钮选中时的内部填充效果 */
.form-check-input:checked {
  background-color: dodgerblue;
  border-color: dodgerblue;
}

.form-check-input:checked::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: white;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* 2. 给整个label容器加默认样式，选中时修改边框和阴影 */
.selected-item {
  display: flex; /* 让按钮和文本垂直居中对齐 */
  align-items: center;
  padding: 8px 12px;
  border: 1px solid #ccc; /* 默认边框 */
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease; /* 平滑过渡提升体验 */
}

.selected-item:has(input:checked) {
  border-color: dodgerblue; /* 选中时边框变蓝色 */
  box-shadow: 0 0 0 2px rgba(30, 144, 255, 0.2), 3px 3px 11px 1px dodgerblue; /* 内发光+外层阴影，增强区分度 */
}

对应的HTML（无需大改，保持原有结构即可）

<div class="form-check enrgy-form">
  <label class="form-check-label label-nowrapp selected-item">
    <input class="form-check-input" type="radio" name="energy" formControlName="energy" value="Energy" (change)="setOptions()">Fuel-fired
  </label>
</div>

关键说明 #

• appearance: none：彻底移除浏览器默认的单选按钮样式，让我们能完全自定义按钮外观。
• :has(input:checked)：CSS父选择器，当label内部的input被选中时，给整个label应用选中样式。如果需要兼容旧版浏览器，可以用JS监听change事件来添加/移除类名替代。
• flex布局：让单选按钮和文本垂直居中，提升整体视觉协调性。

这样调整后，不仅去掉了难看的白色方框，还能在选中时让「按钮+文本」的整个区域都有明显的边框和阴影，区分度拉满～

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