11492


button要素内の画像をCSSでグレースケール化したい

下記のように、button要素にdisabled属性が付けられている場合だけ、内部のimg要素の画像をグレースケール化したいです。

[code]

    <button disabled><img src="URL"/></button>
    
[/code]

グレースケール化とその解除については、JavaScriptで何らかの関数を呼び出したりするのではなく、CSSでする方法を探しています。  
↓こんな風に書けたら理想的です。

[code]

    button[disabled] > img { /* ここでグレースケール化の記述 */ }
    
[/code]

対象ブラウザはIE8～11、GoogleChrome(43?)です。  
IE8～9なら `filter: gray`、Chromeなら`-webkit-filter:
grayscale(1);`でいけるのですが、IE10～11ではどうにもならず困っています。


CC BY-SA 3.0
2015-06-18T23:52:34.773
11485
2019-12-13T18:43:32.107
8078
question
html css
button要素内の画像をCSSでグレースケール化したい


Kenji Noguchiさんのコメントを参考に、IE8～11とChromeで動作するものができましたので、回答として載せておきます。

[code]

    $('#toggle').click(function() {
      $('#target').prop('disabled', function(i, d) {
        return !d;
      });
    });
[/code]

[code]

    #grayscale-filter {
      display: none;
    }
    
    button>.button-image {
      width: 100px;
      height: 40px;
    }
    
    button>.button-image>img {
      width: 100%;
    }
    
    button[disabled]>.button-image>img {
      filter: gray;
      -webkit-filter: grayscale(1);
    }
    
    button>.grayscale-ie10p {
      display: none;
    }
    
    button>.grayscale-ie10p>svg {
      position: relative;
      top: -2px;
    }
    
    @media all and (-ms-high-contrast:none) {
      button[disabled]>.grayscale-ie10p {
        display: block;
      }
      button[disabled]>.grayscale-other {
        display: none;
      }
    }
[/code]

[code]

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <svg xmlns="http://www.w3.org/2000/svg" id="grayscale-filter">
        <defs>
            <filter id="filtersPicture">
                <feColorMatrix type="saturate" values="0" />
            </filter>
        </defs>
    </svg>
    
    <button id="toggle">toggle disabled</button>
    <br/>
    <br/>
    
    <button id="target">
        <div class="button-image grayscale-other">
            <img src="http://www.google.co.jp/images/srpr/logo11w.png" />
        </div>
        <div class="button-image grayscale-ie10p">
            <svg xmlns="http://www.w3.org/2000/svg">
              <image filter="url(&quot;#filtersPicture&quot;)" x="0" y="0" width="100%" height="100%" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://www.google.co.jp/images/srpr/logo11w.png" />
            </svg>
        </div>
    </button>
[/code]

<http://jsfiddle.net/Lshr07sk/2/>

※IE8だとjsfiddle見れないですが・・・


CC BY-SA 4.0
2015-06-19T02:31:18.743
11492
2019-12-13T18:43:32.107
2019-12-13T18:43:32.107
32986
8078
11485
answer