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:

1. Can be dragged and highlighted in Firefox:

2. So we add this, but image can still be highlighted while dragging:

3. 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.

Answer 1

Set the following CSS properties to the image:

.selector {
    user-drag: none;
    -webkit-user-drag: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}