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

Question

I'm using primeng autocomplete input

I would that when I focus on the input the blue glow effect get disabled.

Here's my html component

 <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>

I have tried to change css according to the documentation

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

but that doesn't work.

Answer 1

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

Will prevent this effect on Chrome and Safari

Answer 2

this will work on Chrome, Safari and Firefox

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

and add this meta tag to remove it from IE9

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

more details : https://css-tricks.com/removing-the-dotted-outline/

Answer 3

So far this works for me

::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

Write below code in CSS file, but it will apply for all input in that page.

:host >>> .p-inputtext:enabled:focus {
    border-color:#ced4da !important; //to avoid border color change
    box-shadow:none !important;
}

Answer 5

input:focus {
    box-shadow: none !important;
}

This css will eliminate the input glow on focus

Above image show that it has box-shadow on focus.