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
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!
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With