css - 避免在 mat-selection-list 组件中突出显示边框

<分区>

我在我的元素中使用 mat-selection-list 组件。我在下图中显示了一些名称:

我想知道，为什么边框在点击滚动条时突出显示，如上图所示，我怎样才能避免背景中的边框:

HTML

 <mat-selection-list>
   <mat-list-option *ngFor="let player of Players">
     <a mat-list-item><span>{{ player }}</span> </a>
   </mat-list-option>
 </mat-selection-list>

CSS

 mat-selection-list{
 position:relative;
 margin-top:-20.5px;
 width:100%;
 height:80vh;
 overflow-y: scroll;
}
::ng-deep.mat-pseudo-checkbox{
 display: none !important;
}

  import {Component,ViewChild} from '@angular/core';

  @Component({
     selector: 'list-selection-example',
     styleUrls: ['list-selection-example.scss'],
     templateUrl: 'list-selection-example.html',
   })

  export class ListSelectionExample {
       Players: string[] = ['Sachin Tendulkar', ........ 'Anil Kumble'];
     }

DEMO :

最佳答案

这是由于名为 outline 的 CSS 属性。要删除它，只需将此行添加到您的 CSS 类:

mat-selection-list {
   outline: none;
}

关于css - 避免在 mat-selection-list 组件中突出显示边框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53152992/

上一篇：CSS 网格 - 不必要的断字

下一篇：css - 与 sass 子选择器等效的 bs-css 子选择器是什么？

相关文章：

javascript - RxJS 连接两个可观察对象

angular - 对于Angular2，为什么具有相同组件的两个页面(两个选项卡)会相互影响？

html - 下拉列表和按钮在同一行 Angular 对齐方式

html - 如何设置 mat-toolbar-row 使其颜色为 "primary"？

html - 标记类不起作用

php - 基于 MySQL 查询中的 If Else 语句的自定义 CSS

http - 在 Angular2 中同时获取多个 HTTP 资源

Angular 5 snackbar 通知

javascript - 滚动条上的 Twitter Bootstrap 导航栏阴影

在 iis 中托管后 CSS 不引用