How to override a filter:none in CSS

21,029

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.

Share:
21,029
gardni
Author by

gardni

Simply Awesome.

Updated on May 20, 2020

Comments

  • gardni
    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 the filter:none; being set.

    I have tried using filter:; filter: -; and filter: !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 a null 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);
    }