[英]how to set focus for AutoComplete component from PrimeNG library in Angular
[英]disable on focus box shadow primeng autocomplete component
我正在使用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>
我试图根据文档更改 ZC7A628CBA22E28EB17B5F5C6AE2A266AZ
::ng-deep .ui-autocomplete {
box-shadow: 0 !important;
}
但这不起作用。
.ui-autocomplete:focus {
outline-color: transparent;
outline-style: none;
}
将阻止这种对 Chrome 和 Safari 的影响
这将适用于 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" />
到目前为止,这对我有用
::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*/
}
在 CSS 文件中写入以下代码,但它将应用于该页面中的所有输入。
:host >>> .p-inputtext:enabled:focus {
border-color:#ced4da !important; //to avoid border color change
box-shadow:none !important;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.