[FIXED] How to make focus or border after click disappear in PrimeNG

Issue

I have another issue with PrimeNg. I need to turn of a border after click on button. I have tried a lot of ways:

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

It’s not working, even if I add :focus, same to .ng-star-inserted and ng-star-inserted:focus

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

That snippet is not working either, creating a new scss clss named nofocus and added to button give us zero effect. And there I have:

photo

I’m talking about that border around after click.

Solution

you need to add box-shadow:none to element for disappear border

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

Answered By – Hiren Vaghasiya

Answer Checked By – Robin (Easybugfix Admin)

Leave a Reply

(*) Required, Your email will not be published