如何更改 Ngb-Datepicker 导航箭头中的边框

Question

你好，我想消除点击按钮后显示的蓝色边框，我已经尝试用

定位它

::ng-deep{
  .ngb-dp-arrow > button:active {
   border: none !important;
}

但似乎没有任何效果，我已经用这种方法更改了人字形的颜色，所以我将 css 放在正确的位置（组件本身）

Link 重现：https://stackblitz.com/edit/angular-er2bdu?file=src%2Fapp%2Fdatepicker-popup.css

Answer 1

您应该可以使用以下 CSS 删除边框：

::ng-deep .ngb-dp-arrow-btn:focus {
  outline: 0 !important; // remove the darker blue border
  box-shadow: none !important; // remove the light blue border
}

有 2 个边框与 :focus 伪选择器一起出现：

• 深蓝色边框 - 可以通过将 outline 设置为 0
来移除
• 浅蓝色框边框 - 可以通过将 box-shadow 设置为 none
来移除

请参阅 this Stackblitz 的工作演示。