Search code examples
cssimageselecthighlightpointer-events

How to prevent the sides of an image from being selected

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

Solution

  • 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