Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What would cause the error '(CSS 3.0): ":-webkit-autofill" is not a valid pseudo-class.'

I have an MVC web application I am building using Visual Studio 2015.

Some of my forms use auto-fill for input elements, but when using Chrome, auto-filled fields are left with the distasteful pale-yellow background due to the Chrome user agent style sheet. The widely accepted solution to this is to use the following CSS to render inputs without the yellow background:

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px white inset !important;
}

This approach has worked perfectly in all my previous projects (which were built with Visual Studio 2013).

However, in my CSS file, the above code is showing as invalid with the following error:

Validation (CSS 3.0): ":-webkit-autofill" is not a valid pseudo-class.

My previous projects use CSS3 and they are recognising the pseudo-class and applying the style as expected. I have searched the Q&A's here, and googled the error, but I am not finding anything that addresses this issue.

Please can someone shed some light on a) What could be causing this error, and b) Any potential solutions.

To clarify further, I am applying the style at the very bottom of my Site.css file, and there are no in-line styles which could over-ride the expected behaviour. Developer tools confirm the style is not being applied, which indicates that the error is genuinely what is stopping the style from being applied.

As my previous VS2013 projects recognise the pseudo-class, I am assuming that some setting in VS2015 may be the cause, but I cannot find anything to confirm that.

Any advice would be appreciated.

Many thanks

like image 840
jgreen Avatar asked Oct 19 '22 00:10

jgreen


1 Answers

As :-webkit-autofill is a Non-standard css pseudo-element, Visual Studio 2015 is throwing that error due to it's default configuration to correct .css errors.

What you could do is disabled it by, going into: Tools > Options > Text Editor > CSS > Advanced and then toggle uncheck Validation on the right pane. The names may slightly vary, due to the fact I'm translating from my native language.

Hope it helps!

like image 89
Lucas Lazaro Avatar answered Nov 16 '22 05:11

Lucas Lazaro