禁用焦點框陰影啟動自動完成組件

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>

我試圖根據文檔更改 ZC7A62​​8CBA22E28EB17B5F5C6AE2A266AZ

::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 文件中寫入以下代碼，但它將應用於該頁面中的所有輸入。

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

此 ZC7A62​​8CBA22E28EB17B5F5C6AE2A266AZ 將消除對焦時的輸入輝光

上圖顯示它在焦點上有框陰影。