Как остановить выделение элемента div при двойном щелчке - PullRequest
Новая
       11

Как остановить выделение элемента div при двойном щелчке

76 голосов
/ 11 августа 2011

У меня есть этот элемент div с фоновым изображением, и я хочу перестать выделять элемент div при двойном щелчке по нему. Есть ли свойство CSS для этого?

Ответы [ 6 ]

134 голосов
/ 11 августа 2011

CSS ниже не дает пользователям возможности выбирать текст.Живой пример: http://jsfiddle.net/hGTwu/20/

-webkit-user-select: none; /* Chrome/Safari */        
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE10+ */

/* Rules below not implemented in browsers yet */
-o-user-select: none;
user-select: none;

Чтобы нацелить IE9 вниз и Opera, вместо него должен использоваться атрибут html unselectable: 

<div unselectable="on">Test Text</div>
39 голосов
/ 15 апреля 2013

Это работает для меня 

html
{
  -webkit-tap-highlight-color:transparent;
}
27 голосов
/ 20 августа 2015

Я пытался найти решение, чтобы остановить подсветку div в Chrome, и обратился к этому посту. Но, к сожалению, ни один из ответов не решил мою проблему.

После многих онлайн-исследований я обнаружил, что исправить это очень просто. Нет необходимости в каком-либо сложном CSS. Просто добавьте следующий CSS на свою веб-страницу, и все готово. Это работает как на ноутбуках, так и на мобильных экранах. 

div { outline-style:none;}

ПРИМЕЧАНИЕ : Это работало в Chrome версии 44.0.2403.155 m. Кроме того, он поддерживается во всех основных браузерах сегодняшнего дня, как объяснено по этому адресу:

7 голосов
/ 29 декабря 2014

Я не эксперт по CSS, но я думаю, что вы можете использовать ответ tw16, если увеличите количество затронутых элементов. Например, это предотвращает подсветку повсюду на моей странице, не влияя на какой-либо другой вид интерактивности: 

*, *:before, *:after {
    -webkit-user-select: none; /* Chrome/Safari */        
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+ */
}

Эта первая строка любезно предоставлена ​​Полом Айришем (через http://adamschwartz.co/magic-of-css/chapters/1-the-box/).

)
2 голосов
/ 20 мая 2016

Таргетинг на все элементы div: 

div::-moz-selection { background:transparent; }
div::selection { background:transparent; }

Цель всех элементов: 

::-moz-selection { background:transparent; }
::selection { background:transparent; }
1 голос
/ 31 января 2015

отключить выбор пользователя: 

div {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

установить прозрачный фон для выбранного элемента: 

div::-moz-selection { background:transparent; }
div::selection { background:transparent; }
...