Preventing an image from being draggable or selectable without using JS

Question

Does anyone know of a way to make an image not draggable and not selectable -- at the same time -- in Firefox  without resorting to Javascript  Seems trivial  but here s the issue   Can be dragged and highlighted in Firefox     So we add this  but image can still be highlighted while dragging     So we add this  to fix the highlighting issue  but then counterintuitively  the image become draggable again  Weird  I know  Using FF 16 0 1     So  does anyone know why adding -moz-user-select  none  would somehow trump and disable draggable false  Of course  webkit works as expected  Nothing is out there on the Interwebs about this   It would be great if we could shine some light on this together  Edit  This is about keeping UI elements from being inadvertently dragged and improving usability - not some lame attempt at a copy protection scheme

User · Answer

Depending on the situation  it is often helpful to make the image a background image of a div with CSS    lt div id  my-image  gt  lt  div gt    Then in CSS    my-image       background-image  url   img foo png        width     px      height     px      See this JSFiddle for a live example with a button and a different sizing option

User · Answer

Set the following CSS properties to the image   user-drag  none   user-select  none  -moz-user-select  none  -webkit-user-drag  none  -webkit-user-select  none  -ms-user-select  none

User · Answer

A generic solution especially for Windows Edge browser  as the -ms-user-select  none  CSS rule doesn t work    window ondragstart   function    return false    Note  This can save you having to add draggable  false  to every img tag when you still need the click event  i e  you can t use pointer-events  none   but don t want the drag icon image to appear

User · Answer

You can use the pointer-events property in your CSS  and set it equal to  none   img       pointer-events  none      Edited  this will block  click  event  So better solution would be   lt img draggable  false   dragstart   false   class  unselectable  gt    unselectable     user-drag  none     user-select  none    -moz-user-select  none    -webkit-user-drag  none    -webkit-user-select  none    -ms-user-select  none

User · Answer

I created a div element which has the same size as the image and is positioned on top of the image  Then  the mouse events do not go to the image element

User · Answer

I ve been forgetting to share my solution  I couldn t find a way to do this without using JS  There are some corner cases where  Jeffery A Wooden s suggested CSS just wont cover    This is what I apply to all of my UI containers  no need to apply to each element since it recuses on all the child elements   CSS    unselectable          For Opera and  lt   IE9  we need to add unselectable  on  attribute onto each element           Check this site for more details  http   help dottoro com lhwdpnva php        -moz-user-select  none     These user-select properties are inheritable  used to prevent text selection        -webkit-user-select  none      -ms-user-select  none     From IE10 only        user-select  none     Not valid CSS yet  as of July 2012         -webkit-user-drag  none     Prevents dragging of images divs etc        user-drag  none      JS   var makeUnselectable   function   target          target          addClass   unselectable       All these attributes are inheritable          attr   unselectable    on       For IE9 - This property is not inherited  needs to be placed onto everything          attr   draggable    false       For moz and webkit  although Firefox 16 ignores this when -moz-user-select  none  is set  it s like these properties are mutually exclusive  seems to be a bug           on   dragstart   function     return false           Needed since Firefox 16 seems to ingore the  draggable  attribute we just applied above when  -moz-user-select  none  is applied to the CSS        target    Apply non-inheritable properties to the child elements          find                 attr   draggable    false             attr   unselectable    on           This was way more complicated than it needed to be

User · Answer

You could probably just resort to   lt img src       style  pointer-events  none   gt

User · Answer

You could set the image as a background image  Since it resides in a div  and the div is undraggable  the image will be undraggable    lt div style  background-image  url  image jpg     gt   lt  div gt

[css] Preventing an image from being draggable or selectable without using JS

Examples related to css

Examples related to html

Examples related to firefox

Examples related to draggable