Как удалить выделение по изображениям

Question

Я хочу удалить выделение выделения на все изображения на моей странице. я нашел некоторые полезные дополнения, как:

CSS

img { 
    -webkit-user-select:none; 
    -khtml-user-select:none; 
    -moz-user-select:none; 
    -o-user-select:none; 
     user-select:none; 
     pointer-events:none 
} 

Но когда я нажимаю вниз мою кнопку мыши и выбрать несколько вещей, или нажмите Ctrl+A для «выбрать все» мои изображения получают подсвечиваются голубым оттенком. Я попытался изменить его с помощью:

CSS

img::selection  {background:transparent;color:inherit;} 
img::-moz-selection {background:transparent;color:inherit;} 

Но что не имеют никакого эффекта.

Есть ли у кого-нибудь полезное решение или его еще нет?

P.S. : Я не забочусь о выборе моих изображений - я просто хочу избавиться от этой синей формы.

Answer 1

Здесь идет дурацкое решение, которое я придумал ...

1) После некоторого тестирования я обнаружил, что это происходит только на Mozilla. Другие браузеры не отображают синий цвет на изображениях, если код

img::selection { 
    background: transparent; 
} 

установлен.

2) Даже мозилла - только проблема с элементами изображения. Но другие элементы с background-image подчиняются правилу ::selection.

Таким образом, технически мы могли бы обойти это, полагая, что добавим пустой разброс в нашей разметке после каждого элемента img, который мы установили для отображения: none;

Затем мы можем добавить CSS, который будет работать только в firefox, который устанавливает изображения на display:none и помещает фоновое изображение на соседний промежуток.

Как это:

FIDDLE

**

img::selection { 
 
    background: transparent; 
 
} 
 
img + span { 
 
    display: none; 
 
} 
 

 
@-moz-document url-prefix() { 
 
    img { 
 
     display: none; 
 
    } 
 
    
 
    img + span { 
 
     background: url(http://placehold.it/200x200) no-repeat; 
 
     width: 200px; 
 
     height: 200px; 
 
     display: block; 
 
    } 
 
}

<div>Hello there </div> 
 

 
<img src="http://placehold.it/200x200" /><span></span> 
 

 
<div>Hello there </div>

1: http://jsfiddle.net/GMuzV/30/

Answer 2

Это отключил подсветку на DOM элемента:

function disableSelection(target){ 
    if (typeof target.onselectstart!="undefined") // if IE 
     target.onselectstart=function(){return false} 
    else if (typeof target.style.MozUserSelect!="undefined") // if Firefox 
     target.style.MozUserSelect="none"; 
    else // others 
     target.onmousedown=function(){return false;} 

    target.style.cursor = "default"; 
} 

Используйте это так:

disableSelection(document.getElementById("my_image"));