How to override a filter:none in CSS
Extracted from this answer
Microsoft introduced -ms-filter to make Internet Explorer more standards-compliant (CSS 2.1 requires vendor extensions to have vendor prefix). As the syntax of original filter property is not CSS 2.1 compliant, IE8+ requires the value of the -ms-filter property to be enclosed in quotation marks.
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(enabled=false)" /* IE 8+ */;
filter: none !important; /* IE 7 and the rest of the world */
As you said, you need to override an existing style, so append !important
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(enabled=false) !important";
If you were wondering, quotations ARE required for this microsoft (-ms) vendor prefix. As you see this use case uses MS's gradients, interject that with whatever filter property you wish to override.
Comments
-
gardni almost 4 years
I have an IE7 specific stylesheet which applies
filter:none;
I have no access to this file so can not simply remove the line. I need to somehow override it via CSS, to ignore thefilter:none;
being set.I have tried using
filter:;
filter: -;
andfilter: !important;
which should cause the filter attribute to be invalid, but the filter is still being set.Is it possible to do this without removing the line in the IE7 specific stylesheet or use of javascript/jquery?
answer:
to fix my specific problem of this, it was not possible to simply override the
filter
with anull
equivalent as i was asking. As an answer below suggests, it must be overridden by applying the filter directly to where i wanted to override.IE7 Specific Stylesheet:
.div.example { filter:none; }
overridden by: Generic Stylesheet:
.div.example { filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F000000,endColorstr=#7F000000); }