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.
.ui-autocomplete:focus {
outline-color: transparent;
outline-style: none;
}
Will prevent this effect on Chrome and Safari
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/
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*/
}
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;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.