remove grey background on link clicked in ios safari / chrome / firefox

后端 未结 2 580
心在旅途
心在旅途 2020-12-02 08:52

When you click (touch) a link in Safari (or chrome or firefox) for iOS, you get a grey background behind link (only while you\'re holding it). Is there a way to remove this

相关标签:
2条回答
  • 2020-12-02 09:09

    Webkit has a specific style property for that: -webkit-tap-highlight-color.

    Copied from: http://davidwalsh.name/mobile-highlight-color—

    /* light blue at 80% opacity */
    html {
        -webkit-tap-highlight-color: rgba(201, 224, 253, 0.8);
    }
    
    /* change it for a div that has a similar background-color to the light blue tap color */
    .blueDiv {
        -webkit-tap-highlight-color: rgba(251, 185, 250, 0.9);
    }
    

    If you want to remove the highlight completely—

    .myButton {
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    }
    
    0 讨论(0)
  • 2020-12-02 09:14

    Latest versions of iOS are ignoring RGBA colors for some reason.

    To remove it, I ended up having to use the following:

    -webkit-tap-highlight-color: transparent;
    

    As documented here: https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-tap-highlight-color

    0 讨论(0)
提交回复
热议问题