My css text-align property is overriden by user agent stylesheet

Question

I have a text input field (more specifically, in my Angular app, a primeNg maskInput) for which I want to center the text.

I've correctly set the property in my css:

p-inputMask {
    text-align: center;
}

It is valid and picked up by chrome, but somehow it uses the default UA stylesheet instead:

I have the same result in Firefox. If I add text-align: center; inline, it works! I'm puzzled. If it were not valid, I'd understand. If the result were not the same on different browsers, I'd understand. If inline style didn't work, I'd understand. But it seems like it should work!

Edit: Things I've tried:

Changing the selector to a class
Changing the selector to all input tags
Changing the selector to an id
Setting the alignment as !important

It is not an inheritance nor specificity problem. The property is picked up by chrome (and simply styling input should have higher priority than the UA stylesheet, unless I'm mistaken). Here is my computed tab:

Chrome sees my property, but somehow, even if !important (which is the case on this capture), it deems it less important than the vanilla style.

I also tested changing the selector to something more specific, on the class, on all `input`, on an id... to no avail. — Saucistophe, Oct 14 '19 at 09:22
use !important to force properties : p-inputMask { text-align: center !important; } — becher henchiri, Oct 14 '19 at 09:24
you have inheritance here. The selector should be applied to the input — Temani Afif, Oct 14 '19 at 09:26
@becherhenchiri you should always prefer specificity in your cascade to using `!important`. If you have to rely on it, there's something wrong with your logic. — Constantin Groß, Oct 14 '19 at 09:27
I don't think it has to do with specificity (or at least not that I can grasp), cf my edit. Regardless, thanks for the hunch! — Saucistophe, Oct 14 '19 at 11:05
Ok, I feel bad about this; this had to do with specificity, kinda. I had to use Angular ::ng-deep pseudo selector. — Saucistophe, Oct 14 '19 at 11:14

My css text-align property is overriden by user agent stylesheet

0 Answers0