Change focused input border in PrimeNG

user_11467079 0
Viewed 1666

I'm using PrimeNG for Angular and I want to change the shadow of the input box when I focus it, right now it looks like this:

enter image description here

But I want to change that blue part to green, for example. Checking the documentation it tells me that I have to change the p-inputtext class, but it's not giving me the desired result. This is what I'm doing right now

body .p-inputtext{
    border-color: green !important;
}

Result:

enter image description here

It's drawing the green border but it doesn't get rid of the blue part. How could I do this?

primeng angular css
1 Answers

I solved it this way

span > .p-inputtext:enabled:focus{
    border-color: #4D80CA !important;
    box-shadow: 0 0 0 0.02rem green !important;
}


span > .p-inputtext:hover{
    box-shadow: 0 0 0 0.02rem green !important;
}
user_114670790
Related