禁用焦点框阴影primeng自动完成组件

Question

我正在使用primeng自动完成输入

我希望当我专注于输入时，蓝色发光效果会被禁用。

这是我的html组件

 <p-autoComplete [(ngModel)]="text" [suggestions]="results" (completeMethod)="search($event)"
 emptyMessage={{noBorrowerResult}} 
 [minLength]="3"
 [size] = "40"
 field = "name"
 >
 <ng-template let-elm pTemplate="item">
    <div class="suggestion-item">{{elm.name}} ( ID: {{elm.code}} )</div>
 </ng-template>
 </p-autoComplete>

我试图根据documentation

更改css

::ng-deep .ui-autocomplete {
    box-shadow: 0 !important;
} 

但这不起作用。

Answer 1

.ui-autocomplete:focus {
  outline-color: transparent;
  outline-style: none;
}

会阻止Chrome和Safari上的此效果

Answer 2

这适用于Chrome，Safari和Firefox

.ui-autocomplete:focus, .ui-autocomplete::-moz-focus-inner {
    outline: 0;
    border: 0;
}

并添加此meta代码，将其从IE9

中删除

<meta http-equiv="X-UA-Compatible" content="IE=9" />

更多详情：https://css-tricks.com/removing-the-dotted-outline/

Answer 3

到目前为止，这对我有用

::ng-deep.ui-inputtext:enabled:focus:not(.ui-state-error) {
  outline: 0 none !important;
  outline-offset: 0 !important;
  box-shadow: 0 0 0 0 !important; /*I remove the border shadow*/
  border-color: black !important; /*Can change to any color*/
}

Answer 4

在 CSS 文件中写入以下代码，但它将应用于该页面中的所有输入。

<ul class="products">
    <li class="product-category">
    <li class="product-category">
    <li class="product">
    <li class="product">
</ul>