CODEWITHSUNDEEP
cssangularprimeng
FlowMafia
FlowMafia

Reputation: 1002

Change focused input border in PrimeNG

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?

Upvotes: 2

Views: 6033

Answers (1)

FlowMafia
FlowMafia

Reputation: 1002

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;
}

Upvotes: 3

Related Questions