从所选图片中移除蓝色叠加/高亮显示

Question

我正在制作一个带有一些动态可点击图片的Web应用程序，我注意到（特别是在Chrome中，但也在Firefox中）任何轻微意外拖动图像都会将其变为蓝色（以表示它已选中）。是否有任何方法可以在jquery、css或html中取消这种令人讨厌的副作用，或者也许有一种方法可以使用图片而不具有此默认行为?

我的图片位于无序列表中，如下所示：

<ul>
  <li><img src="path"/></li>
  <li><img src="path"/></li>
  <li><img src="path"/></li>
</ul>

- Pure Function

---

请禁用文本选择高亮的CSS规则：https://dev59.com/pnRA5IYBdhLWcg3wyRF6 => http://jsfiddle.net/steweb/2qPWz/ - stecb

这个回答解决了您的问题吗？如何禁用文本选择高亮显示 - The Codesee

Answer 1

我认为，为了在不同浏览器中防止用户选择文本，你可以使用以下代码：

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

JS Fiddle演示。

- David Thomas

---

@Code Novitiate，没问题，很高兴能帮到你！=) - David Thomas

你也可以使用outline: none; - Mr. Smee

@mrsmee：“outline: none;”可以防止在焦点状态下应用默认的轮廓线到元素上，但它并不能防止选择（至少在Ubuntu 11.04上的Chromium 12和Firefox 5中不行）。您在哪个浏览器/平台上观察到了这种行为？ - David Thomas

在Ubuntu 12.04上测试Firefox 17后，这似乎不再有效。在jsfiddle代码测试平台中，图像仍然可以被拖动和选择（按CTRL/CMD+A进行复制）。 - joar

为了防止在Firefox中拖动图像，请使用draggable="false"。参考链接：https://dev59.com/9ms05IYBdhLWcg3wG-RR - Pure Function