".invalid .value" styling overlap ".pc-focus .value" styling

I use xf:select1 and xf:input componment in my formular which are binding on required="true" attribut.
I have a specific styling (pink color) on this invalid componment.

.invalid .value
{
background-color:#FF9999; /*#DDDDFF;*/
}


Moreover, I use pc-focus styling to identify the current field which has the focus.

.pc-focus .value
{
background-color:#316AC5;
}


When the current field is a required field, the required styling overlap the pc-focus styling.
It's very boring for the user because this one thinks to have loose the focus.