0

Below I have an image followed by text. How do I prevent the area surrounding it from being highlighted? The image itself is not selectable (using 

-webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none;
  pointer-events: none;

) but the surrounding area of the image is. I tried adding left and right margins to the image as well as making the image its own div and applying the above code to the div, but it does not work. (I made the highlight green)

See here

Edit: Here is another example linked here https://jsfiddle.net/nnzf4h5c/jsfiddle example

Cris
  • 231
  • 6
  • 16

1 Answers1

1

You could wrap the content in a div with the same style:

img {
  max-width: 100%;
  height: auto;
}
.cont01 {
  width: 50px;
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none;
  pointer-events: none;
}
<div class="cont01"><img src="https://sites.psu.edu/siowfa16/files/2016/10/YeDYzSR-10apkm4.png">
</div>
Text
itacode
  • 3,721
  • 3
  • 21
  • 23
  • Thanks but this prevents the text from being highlighted now, the text is precisely what I _want_ highlighted – Cris Jul 31 '17 at 01:23
  • I have updated the answer, it seems working cross-browser. – itacode Jul 31 '17 at 01:26
  • You are welcome. You could accept the answer and/or vote it if it works. [What should I do when someone answers my question?](https://stackoverflow.com/help/someone-answers) – itacode Jul 31 '17 at 22:56