如何在 PrimeNG 中单击后使焦点或边框消失

Question

我还有一个关于 PrimeNg 的问题。单击按钮后我需要关闭边框。我尝试了很多方法：

host: {
    ::ng-deep .ui-button-icon-only{
        border: none!important;
        background-color: transparent!important;
        outline: none!important;
    }
}

它不起作用，即使我添加 :focus，与 .ng-star-inserted 和 ng-star-inserted:focus

相同

*:focus {
    outline: none!important;
    border: 0!important;
}

该代码段也不起作用，创建一个名为 nofocus 的新 scss clss 并添加到按钮给我们零效果。我有：

我说的是点击后的边框。

Answer 1

您需要将 box-shadow:none 添加到元素中以消除边框

host: {
    ::ng-deep .ui-button:focus, ::ng-deep .ui-button:enabled:focus{
        box-shadow:none;
        -webkit-box-shadow:none;
        -moz-box-shadow:none;
    }
}

Answer 2

used ::ng-deep and add box-shadow:none to element for disappear border

::ng-deep body .ui-button:enabled:focus {
    outline: 0 none;
    outline-offset: 0px;
    box-shadow: none  
}

Answer 3

每个元素选择后都有class.p-focus，所以你应该重写这个class .

例如输入开关：

.p-inputswitch.p-focus .p-inputswitch-slider {
  box-shadow: none;
}

如何在 PrimeNG 中单击后使焦点或边框消失

How to make focus or border after click disappear in PrimeNG

html

sass

primeng

angular