How to remove highlight border color of on select primeng component-CodePudding

See the Example image I am using the primeng component in my application it has css class p-component. Whenever I click on any field whether it is button or input or any other field It got highlited with blue color border. I don't need that So I tried to use outline:none but it doesn't work out.

CodePudding user response：

Apply the following CSS to remove auto highlited blue color

input:focus {
    box-shadow: none !important;
}

CodePudding user response：

It'd be good if you can post your code so that we can get a 100% correct answer to you. However, looking at PrimeNG's website it seems as though the .p-inputtext:enabled:focus selector is setting the following

box-shadow: 0 0 0 0.2rem #BFDBFE;
border-color: #3B82F6;

So add a rule to your own css below the linked PrimeNG css file with the following rule

.p-inputtext:enabled:focus {
    box-shadow: none;
    border-color: initial;
}

I can check this for you if you post up your code, though.