如何在Angular Material中选择单选按钮后快速移除焦点

算力阿峰

2026-7-28

移除Angular Material单选按钮选中后的焦点外圆环

问题描述

我有一个包含两个Angular Material单选按钮的登录表单，希望选中任意单选按钮后快速禁用焦点外圆环。以下是我的代码：

HTML模板

<div id="login-form" class="vh-100 overflow-auto">
    <div>
        <mat-horizontal-stepper [@.disabled]="true" labelPosition="bottom" [linear]="true" #stepper>
            <mat-step>
                <div>
                    <div class="header">
                        <div class="">
                            <span>Login to your Account </span>
                        </div>
                    </div>

                    <mat-divider></mat-divider>

                    <div id="content" class="p-0">
                        <div>
                            <legend class="Input-legend">Login Using</legend>
                            <mat-radio-group aria-label="Select an option" class="radio-btn-container">
                                <mat-radio-button class="my-2" value="1" checked="true"><span>Mobile</span></mat-radio-button>
                                <mat-radio-button class="my-1" value="2"><span>number</span></mat-radio-button>
                            </mat-radio-group>

                            <mat-divider class="mat-div1"></mat-divider>

                            <div class="continue-btn-holder">
                                <div class="temp"></div>
                                <button class="continue-btn">Continue</button>
                            </div>

                            <mat-divider class="mat-div2"></mat-divider>
                          </div>
                    </div>
                </div>
            </mat-step>
        </mat-horizontal-stepper>
    </div>
</div>

CSS样式

/* radio btn */
::ng-deep
  .mat-radio-button.mat-accent.mat-radio-checked
  .mat-radio-outer-circle {
  border-color: #379aaf !important;
}

::ng-deep .mat-radio-button.mat-accent .mat-radio-inner-circle {
  color: #379aaf !important;
  background-color: #379aaf !important;
}

::ng-deep .mat-radio-button.mat-accent .mat-radio-ripple .mat-ripple-element {
  background-color: #379aaf !important;
}

/* input fields */
::ng-deep
  .mat-form-field-appearance-outline.mat-focused
  .mat-form-field-outline-thick {
  color: #379aaf;
}

::ng-deep .mat-form-field-wrapper {
  margin: 0 !important;
  padding: 0 !important;
}

/* btn */
.mat-button.mat-dark,
.mat-stroked-button.mat-dark {
  color: #111827;
}
.mat-button.mat-dark:hover,
.mat-stroked-button.mat-dark:hover {
  background-color: #f0fff3;
}

.mat-raised-button.mat-dark,
.mat-flat-button.mat-dark,
.mat-fab.mat-dark,
.mat-mini-fab.mat-dark {
  color: #f0fff3;
  background-color: #111827;
}

.mat-icon-button.mat-dark {
  color: #111827;
}

/* to remove stepper */
::ng-deep .mat-horizontal-stepper-header-container {
  display: none !important;
}

::ng-deep .mat-horizontal-content-container {
  padding: 0 !important;
}

/* body css */
legend {
  display: block;
  padding-inline-start: 2px;
  padding-inline-end: 2px;
  border-width: initial;
  border-style: none;
  border-color: initial;
  border-image: initial;
}

#login-form {
  background-color: rgb(249, 250, 252);
  padding-top: 64px;
  padding-bottom: 64px;
}

#login-form > div {
  max-width: 1000px;
  padding-left: 24px;
  padding-right: 24px;
  width: 100%;
  margin-left: auto;
  box-sizing: border-box;
  margin-right: auto;
  display: block;
}

#login-form > div > mat-horizontal-stepper {
  background-color: rgb(255, 255, 255);
  color: rgb(18, 24, 40);
  transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  border-radius: 8px;
  border: 1px solid rgb(230, 232, 240);
  background-image: none;
  overflow: hidden;
}

.header {
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  padding: 32px 24px;
  text-align: center;
  height: 100%;
}

.header > div {
  flex: 1 1 auto;
}

.header > div > span {
  margin: 0px;
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1.375;
  font-family: "Source Sans Pro", "Helvetica Neue", Arial, -apple-system,
    BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji";
  display: block;
}

#content {
  display: block;
}

#content > div {
  padding: 32px;
}

.radio-btn-container {
  display: inline-flex;
  flex-direction: column;
  position: relative;
  min-width: 0px;
  padding: 0px;
  margin: 16px 0px;
  border: 0px;
  vertical-align: top;
}

.radio-btn-container > mat-radio-button {
  display: inline-flex;
  -webkit-box-align: center;
  align-items: center;
  cursor: pointer;
  vertical-align: middle;
  -webkit-tap-highlight-color: transparent;
  margin-right: 16px;
}

.radio-btn-container > mat-radio-button span {
  margin: 0px;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  font-family: "Source Sans Pro", "Helvetica Neue", Arial, -apple-system,
    BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji";
}

.mat-div1 {
  margin: 0px 0px 16px;
  flex-shrink: 0;
  border-width: 0px 0px thin;
  border-style: solid;
  border-color: rgb(230, 232, 240);
}

.mat-div2 {
  margin: 16px 0px;
  flex-shrink: 0;
  border-width: 0px 0px thin;
  border-style: solid;
  border-color: rgb(230, 232, 240);
}

.Input-legend {
  font-size: 1rem;
  line-height: 1.4375em;
  font-family: "Source Sans Pro", "Helvetica Neue", Arial, -apple-system,
    BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji";
  padding: 0px;
  position: relative;
  text-transform: capitalize;
  color: rgb(55, 65, 81);
  font-weight: 700;
  margin: 0 !important;
}

.continue-btn-holder {
  display: flex;
  flex-direction: row;
  margin-top: 8px;
}

.continue-btn-holder .temp {
  flex: 1 1 auto;
}

.continue-btn-holder .continue-btn {
  display: inline-flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  position: relative;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  outline: 0px;
  border: 0px;
  margin: 0px;
  cursor: pointer;
  user-select: none;
  vertical-align: middle;
  appearance: none;
  text-decoration: none;
  font-weight: 600;
  font-family: "Source Sans Pro", "Helvetica Neue", Arial, -apple-system,
    BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji";
  font-size: 0.875rem;
  line-height: 1.75;
  border-radius: 8px;
  transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
    box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
    border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
    color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  box-shadow: none;
  padding: 8px 16px;
  min-width: 160px;
  text-transform: initial;
  background-color: rgb(17, 24, 39);
  color: rgb(255, 255, 255);
}

TS文件无代码。

解决方案

方法1：纯CSS移除焦点圆环

Angular Material单选按钮的焦点外圆环由:focus状态下的box-shadow或outline控制，添加以下CSS规则即可移除：

/* 移除单选按钮焦点状态的外圆环 */
::ng-deep .mat-radio-button:focus-within .mat-radio-outer-circle {
  box-shadow: none !important;
  outline: none !important;
}

/* 确保选中状态下即使有焦点也无圆环 */
::ng-deep .mat-radio-button.mat-radio-checked:focus-within .mat-radio-outer-circle {
  box-shadow: none !important;
}

/* 直接禁用单选容器的焦点轮廓 */
::ng-deep .mat-radio-button .mat-radio-container:focus {
  outline: none !important;
}

将以上代码添加到你的CSS文件中，即可覆盖默认的焦点样式，选中单选按钮后不会显示外圆环。

方法2：通过组件逻辑主动移除焦点

如果CSS方案无法完全生效，可以通过Angular的事件绑定在选中后主动让按钮失去焦点：

修改HTML模板，给单选按钮添加(change)事件：

<mat-radio-group aria-label="Select an option" class="radio-btn-container">
    <mat-radio-button class="my-2" value="1" checked="true" (change)="blurRadio($event)">
        <span>Mobile</span>
    </mat-radio-button>
    <mat-radio-button class="my-1" value="2" (change)="blurRadio($event)">
        <span>number</span>
    </mat-radio-button>
</mat-radio-group>

在TS文件中添加事件处理函数：

blurRadio(event: any) {
  // 获取当前单选按钮元素并移除焦点
  event.source._elementRef.nativeElement.blur();
}

这种方式会在用户选中单选按钮后立即让元素失去焦点，从根源上避免焦点圆环的显示。

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

如何在Angular Material中选择单选按钮后快速移除焦点

问题描述 #

HTML模板 #

CSS样式 #

解决方案 #

方法1：纯CSS移除焦点圆环 #