grayscale - how to disable it automatically


Tags: html,css,filter,grayscale

Problem :

Many websites in Thailand are now in grayscale, mostly using -webkit-filter: grayscale(100%), filter: grayscale(100%) and so on.

I know we can see them in colors as usual, "manually" (in Chrome) by pressing/clicking the F12 > elements > styles and uncheck grayscale filter check-boxes. But this is not a good way if we need to do the procedure on every webpage.

So, I tried extensions like CustomBlocker, stylish, stylebot, etc,... with no success. They can css-select but cannot correctly edit/inject/insert/remove on the grayscale filters.

I have tried most thing found in google for almost 4 hours with little results. Please help me:

How to automatically disable the grayscale filters on any webpages which are using them ?

Thank you very much for your helpful insights in advance.

p.s. you may try on a website like http://www.bangkokpost.com/



Solution :

Though it appears you have already tried this you should create a custom CSS stylesheet that Chrome will use with a plugin like Stylish (not sure if there is a built in feature in Chrome).

Then you override the filter in the custom stylesheet.

* {
    -webkit-filter: none !important; 
    filter: none !important; 
}

However with the site that you referenced, the whole site is being greyscaled via JavaScript, so in this case all I could do was disable JavaScript in my browser. This makes everything colourful again.


    CSS Howto..

    How to play CSS3 transitions in a loop?

    How to do centered

    with
    on both sides over a background image

    How animate stacking divs in javascript/css?

    Flexbox: How do I create my thumbnails to span 100% of the container width?

    Can someone tell me how to implement this Javascript? HTML CSS

    how to display three text fields on one line

    How to make a disabled select box look like a normal text box(css only)

    how do i get an div to stay in place while text around it gets bigger or shorter

    How can i get bootstrap to alter page CSS instead of lay dormant?

    How can I put styleName (css) on ui.xml to HTML5 input element (range)

    How do I display menu items in front of images?

    How to stop CSS selector from selecting all child elements

    How are CSS frameworks used?

    CSS - How to make footer stay at the bottom of the page?

    How to reverse a CSS3 hover transformation?

    How to select label tags that do not have a span inside them using css

    How can I make a fluid width, fluid height, fixed header table with jQuery?

    How can I use CSS to select and style all LI elements that have UL sub-elements? [duplicate]

    how to make my horizontal css dock navigation to vertical

    How do I correct this CSS fluid layout glitch?

    Amazing CSS Div scrolling effect, cant explain, link provided. This is a web design issue, how to get an effect like this?

    How to set parent div height to self adapt to the inner div height?

    How to combine bold and italic in CSS?

    HTML/CSS how to temporarily highlight a section of a page [duplicate]

    how to : change css class of a button in a parent window with javascript or jquery?

    How to create inheritance with LESS?

    How can I vertically align this navigation bar?

    How can browsers resolve icon libraries that aren't specifically referenced in the frontend code?

    How to quickly create complex web controls for web development? [closed]

    How do I get a fixed positioned footer, fixed width right column, left column for the rest using CSS lay-out?