Search code examples
htmlcssemailgmailhtml-email

In email template, mail automatically removes pointer-events: none in class


As i am working in email templates, i added a class like this in my email template.

img {
  display: inline-block;
  vertical-align: middle;
  max-height: 100%;
  max-width: 100%;
  pointer-events: none;
}

but when I open the mail in the inbox. It automatically removes pointer-events in the css class.

img {
  display: inline-block;
  vertical-align: middle;
  max-height: 100%;
  max-width: 100%;
}

like this. Is there any solution or workaround for this?


Solution

  • As it seems the pointers-events property is not supported, you may use z-index property. Something like this:

    .container {
       position: relative;
       z-index: 0;
       background: none;
    }
    .container > * {
       position: relative;
       z-index: -1;
    }
    

    This makes content visible, but not clickable, because parent div is on top layer.

    Copied answer from here: stackoverflow.com/a/39851786/34092