Как убрать выделение картинки css

Выделение при нажатии на картинку

при нажатии на картинку либо на блок происходит выделение синим фоном. Особенно это заметно при нажатии в мобильном браузере. Как этого избежать ?

94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:

Выделение area при нажатии
Доброго времени суток, у меня возникла проблема с тегом area , мне не обходимо , чтобы при нажатие.

Убрать выделение кнопки при нажатии
Здравствуйте, можно как то с кнопки убрать дот квадратик который появляется в момент нажатия по.

При нажатии на картинку воспроизводится видео
Как сделать,чтобы при нажатии на картинку началось воспроизводиться видео? <div >

Свойство, заменяющее картинку при нажатии на неё
Нужно свойство типа :active, но проблема в том, что :active, после того, как перестаешь нажимать на.

2964 / 2593 / 1068
Регистрация: 15.12.2012
Сообщений: 9,832
Записей в блоге: 11

Deprow, чтобы дать Вам ответ необходимо увидеть полный код. Того, что Вы предоставили недостаточно. Если картинка обёрнутая в ссылку, то она может выделяться применением дефолтных стилей к псевдоклассам — :active, :link или :visited, а почему выделяется второй Ваш вариант не понятно.

Регистрация: 27.02.2018
Сообщений: 18
выделение происходит только если заходить с телефона.

2964 / 2593 / 1068
Регистрация: 15.12.2012
Сообщений: 9,832
Записей в блоге: 11

Сообщение от Deprow

выделение происходит только если заходить с телефона.
Ну не хотите давать код, давайте nsefnm пальцем в небо. Допустим так:

*{outline:0 !important}

Регистрация: 27.02.2018
Сообщений: 18

А нет кода =) То есть всё очень просто как я указал выше

1 2 3 4 5

div onclick=func()>img src=1.jpg>/div> func()

на мобильном происходит выделение синим фоном при нажатии. с компа нет такой проблемы.

div {outline:0 !important}

не помогает

2964 / 2593 / 1068
Регистрация: 15.12.2012
Сообщений: 9,832
Записей в блоге: 11
Ну давайте так попробуем:

1 2 3 4 5

-moz-user-select: none; -o-user-select: none; -khtml-user-select: none; -webkit-user-select: none; user-select: none;

2231 / 1619 / 641
Регистрация: 07.08.2016
Сообщений: 3,908
Не для дива, для img outline:none пропишите
Регистрация: 27.02.2018
Сообщений: 18
к сожалению, так же
Регистрация: 27.02.2018
Сообщений: 18

2964 / 2593 / 1068
Регистрация: 15.12.2012
Сообщений: 9,832
Записей в блоге: 11

img { pointer-events: none; }

Больше вариантов нет.

2231 / 1619 / 641
Регистрация: 07.08.2016
Сообщений: 3,908

Эммм, вот все что вокруг домика голубым залито, вот это и появляется? Тогда не видя кода мы бесконечно будем гадать отчего он появляется.

Регистрация: 27.02.2018
Сообщений: 18
Это происходит при нажатии на блок div

1 2 3

div onclick=func()>img src=domik.jpg>/div> func()

2964 / 2593 / 1068
Регистрация: 15.12.2012
Сообщений: 9,832
Записей в блоге: 11

Deprow, удалите картинку из блока и нажмите на него. Он выделиться? Нет. Я Вам накидал всевозможные варианты снятия выделения со строчных элементов, если ни один не подошёл — значит у Вас особенный телефон. Найдёте решение милости просим.

Регистрация: 27.02.2018
Сообщений: 18

Fedor92, не с телефоном всё норм. пробую на разных, результат тот же. даже без картинки

2231 / 1619 / 641
Регистрация: 07.08.2016
Сообщений: 3,908

При user-select должна только картинка выделяться, а не весь див, если конечно голубым отмечено выделение, или нас тут не троллят.

зы, а может это просто бекграунд для активного пункта меню появляется ?

Добавлено через 2 минуты
Deprow, Вы понимаете, что кидая нам две строчки кода (одна из которых не рабочая), вы нам ничем не поможете, а следовательно мы не поможем вам

Регистрация: 27.02.2018
Сообщений: 18

выделение блока происходит даже без картинки

Добавлено через 17 минут
Смысл минусовать меня если я задал нормальный вопрос, привел пример и изображение ? Проблема детства у вас что ли ? Либо дебилизм по генам перешёл ?

Вам с самого начала темы твердят покажите весь код, вы в ответ приводите 2 бесполезные строчки причем одна из которых вообще нерабочая . Так что либо проблемы детства у вас, либо вы над нами просто издеваетесь, отсюда и минус

Регистрация: 27.02.2018
Сообщений: 18

AlexZaw, мужик ты посмотри внимательно — вон он код !

1 2 3 4 5

div onclick=func()>нажми/div> script> func() < alert('привет'); >/script>

больше не чего нет. Это просто блок. Повторю ещё раз это просто блок ! о чём вы можете твердить если вы невнимательны?
Ещё раз

1 2 3 4 5

div onclick=func()>нажми/div> script> func() < alert('привет'); >/script>

Ну а теперь вы опять попросите показать код ?

Добавлено через 7 минут
если кто это не понял то —

func() { alert('привет'); } это function func() { alert('привет'); }

2231 / 1619 / 641
Регистрация: 07.08.2016
Сообщений: 3,908
т.е. весь ваш index.html выглядит примерно так:

1 2 3 4 5 6 7 8 9 10 11 12 13 14

 html lang="en"> head> meta charset="UTF-8"> title>Document/title> /head> body> div onclick=func()>нажми/div> script> function func() < alert('привет'); >/script> /body> /html>

Не используются никакие стили, никакие скрипты.
Регистрация: 27.02.2018
Сообщений: 18
AlexZaw, Именно. И нечего больше. За это стоило 11 минусов ставить ? вы как считаете ?
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
Помогаю со студенческими работами здесь

Как сделать всплывающее окошко при нажатии на картинку
Необходимо сделать чтобы на странице, при нажатии на картинку выскакивало вот такое окошко как на.

При нажатии на картинку вывести окно сообщения с текстом
Привет, нужна помощь. У меня есть картинка, как при нажатии на нее сделать так, чтобы мне вывелось.

Как при нажатии одного радиобаттона показать одну картинку, а при нажатии другого другую
Как сделать так, чтобы при нажатие одного радиобаттона появлялась одна картинка, а при нажатие.

При нажатии на кнопку поменять картинку из элемента ImageList и поставить туда стандартную картинку
Всем привет! Как сделать кнопку и поставить пару картинок в ImageList я знаю. Осталось только.

Как при нажатии на картинку открыть текст и картинку?
Здравствуйте. У меня есть маленькие треугольники (см вложение), при нажатии на который, должен.

При нажатии на картинку
Добрый день, вот какой у меня вопрос. На форме 6 картинок, надо, чтобы нажав на одну из них.

Как запретить выделение/копирование изображения | HTML

Есть скрипты, которые блокируют правую кнопку мышки, в результате чего нельзя вызвать контекстное меню, если нажать на фото. На CSS можно сделать более элегантное решение: в всплывающем контекстном меню не будет пункта «Сохранить изображение как. «.

style="pointer-events: none;">

или для всех изображений сайта

ВНИМАНИЕ: картинка легко скачивается из исходного кода страницы. Серьёзно предполагать, что подобными методами (JavaScript или CSS) можно удержать плагиаторов, нельзя.

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

style="-moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none;">

Я обычно объединяю оба способа для создания, например, такой фотогалереи

18 комментариев:

Иван На вордпрессе тоже есть даже плагин, который выключает правую кнопку мышки, не дает простым способом скопировать фото и текст. Но к сожалению это только простой способ. А скопировать можно другими способами. Это не проблема кто хочет скопировать. NMitra Совершенно верно. Отключение JavaScript даёт доступ к коду, а дальше всё очень просто. Программам даже это делать не нужно, мало какие скрипты видят ту же картинку, что и браузеры. В них просто не заложена поддержка всех свойств CSS, JavaScript.

Эти свойства, конечно, были придуманы для другого. Я сейчас плотно подсела на сочетание pointer-events с user-select и focus. Точно также, как когда-то на :checked. Огорчает только Опера Мини. Rinat Urmancheev К сожалению, способы не подходят для многих IE (goo.gl/SgHlwy, goo.gl/lyBddg). Мне кажется, об этом стоит упомянуть в сообщении 🙂 NMitra Ринат, дело в том, что здесь я не описываю работу конкретного свойства, как, например, тут http://css-tricks.com/almanac/properties/p/pointer-events/ , а даю способы решения конкретной задачи. Было бы, например, странно, если бы я в статье про «таб-вкладки» http://shpargalkablog.ru/2012/03/css-tabs.html давала бы описание каждого отдельного свойства. То же самое и тут.

Да и не справочник у меня, а блог. Справочник в Рунете уже есть и довольно не плохой и удобный в использовании http://htmlbook.ru/ . Англоязычный мне нравится у Мозилы https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events , во-первых, из первых рук, во-вторых, есть ссылка на w3.org (новые-старые версии).

А поддержку браузерами можно посмотреть и тут http://caniuse.com/pointer-events

Тоже обращение по Утриш подписала, а потом прочитала, что вопрос уже решён в пользу заповедника. Ура. Nonna Здравствуйте. Подскажите, как использовать pointer-events: none для всех изображений, кроме нескольких картинок (значков) социальных сетей, которые являются ссылками? Пробовала к
pointer-events: none;

дописывать
pointer-events: auto
не сработало. В отдельном гаджете — тоже ничего. Может есть какой-то способ сделать исключения для работы мышки только на некоторых картинках? NMitra Здравствуйте,

1) использование класса (изображениям, к которым не нужен pointer-events: none; задать класс) http://jsfiddle.net/NMitra/k954gn16/
img < pointer-events: none; >
img.non

2) исключение для картинок-ссылок http://jsfiddle.net/NMitra/k954gn16/1/
img < pointer-events: none; >
a img < pointer-events: auto; >Nonna Здравствуйте, спасибо за скорый ответ. Пытаюсь разобраться (step by step, а уж Вы исправьте что не так) — добавляю гаджет Настроить HTML/JavaScript, вписываю style img pointer-events: none; style так я получаю неработающую левую кнопку+невозможность выделения изображения+нет пункта «сохранить изображение как..» Тут разобралась. Все ОК. Это должно быть применимо ко ВСЕМ изображениям и поэтому сразу перехожу к 2) Вашего ответа — исключения для картинок ссылок. Тут также есть гаджет Настроить HTML/JavaScript в котором есть (одно из нескольких) a href=https www.facebook.com/N» target blank» title Facebook img src https mg-fotki.yandex.ru/get/15519/235879411.0/0_101ae5_4b1c1ddd_XXS.gif style height: 30px; width: 30px; a. И вот тут я застреваю — если у меня в отдельном гаджете уже стоит для всех, то как мне выделить a img? А третий гаджет — переводчик, там есть картинки и для них нужны работающие и правая и левая кнопки мыши.Там есть a class google_translate href target blank» rel nofollow» title English» onclick window.open(‘http translate.google.com/translate?u encodeURIComponent(location.href) langpair auto%7Cen&hl=en return false img alt English» border 0″ align absbottom» title «English height 24src http4.bp.blogspot.com/_5jbh95HruKA/S1YVBORD9bI/AAAAAAAAACs/XkaLmmin4zg/s200/United Kingdom Great+Britain).png style cursor pointer;margin-right 8px width 28 a. Надеюсь, что понятно объяснила свою проблему)) Буду благодарна за пошаговую помощь, так как я еще новичок )) Nonna И еще кое-что. Если с запретом сохранения картинок на компе более-менее понятно, то что делать с мобильниками? «Показывать на мобильных устройствах мобильную версию текущего шаблона. Да.Показывать мобильные шаблоны на мобильных устройствах \Нет.Показывать шаблоны для компьютеров на мобильных устройствах.» И так и так при клике на фото они открываются в отдельном окне с показательным адресом. И сразу предлагается сохранить фото. Плюс у меня свой домен и хотелось бы не отсвечивать движок на адресах картинок. Есть такая возможность? NMitra Здравствуйте. Так.
1) у вас все картинки идут с Г+, поэтому их все там можно вытянуть,
2) изображения индексируют поисковые системы (в полный рост и с хорошим качеством) и человек в большинстве случаев рыщет именно по картинкам Яндекса и Гугл.
3) какой бы вы скрипт не поставили, при желании скопировать адрес изображения для меня не составит большого труда.
4) принадлежность к платформе выдаёт построение кода, а не столько изображения, их может бросать в Г+ и сайт на хостинге

В гаджете не должно быть проблем, так как второй строкой
a img < pointer-events: auto; >
мы убираем действие pointer-events для картинок, у которых родитель ссылка Nonna Здравствуйте. С Вашими ответами разобралась, все понятно, спасибо. С гаджетом не получается все равно: если пишу первую строку, то отключается все, а если пишу 2 строки (вот так) style img < pointer-events: none; >a img < pointer-events: auto; >style, то все вновь включается.То есть исключение для ссылочных картинок не работает. NMitra Только для Blogger

Мышь: отмена выделения, невыделяемые элементы

Материал на этой странице устарел, поэтому скрыт из оглавления сайта.

Более новая информация по этой теме находится на странице https://learn.javascript.ru/selection-range.

У кликов мыши есть неприятная особенность.

Двойной клик или нажатие с движением курсора как правило инициируют выделение текста.

Если мы хотим обрабатывать эти события сами, то такое выделение – некрасиво и неудобно. В этой главе мы рассмотрим основные способы, как делать элемент невыделяемым.

Для полноты картины, среди них будут и такие, которые применимы не только к событиям мыши.

Способ 1: отмена mousedown/selectstart

Проблема: браузер выделяет текст при движении мышью с зажатой левой кнопкой , а также при двойном клике на элемент. Даже там, где это не нужно.

Если сделать двойной клик на таком элементе, то обработчик сработает. Но побочным эффектом является выделение текста браузером.

Текст

Чтобы избежать выделения, мы должны предотвратить действие браузера по умолчанию для события selectstart в IE и mousedown в других браузерах.

Полный код элемента, который обрабатывает двойной клик без выделения:

 
Двойной клик сюда выведет "Тест", без выделения
 

При установке на родителя – все его потомки станут невыделяемыми:

Выделение, всё же, возможно

Отмена действия браузера при mousedown/selectstart отменяет выделение при клике, но не запрещает его полностью.

Если пользователь всё же хочет выделить текстовое содержимое элемента, то он может сделать это.

Достаточно начать выделение (зажать кнопку мыши) не на самом элементе, а рядом с ним. Ведь там отмены не произойдёт, выделение начнётся, и дальше можно передвинуть мышь уже на элемент.

Способ 2: снятие выделения постфактум

Вместо предотвращения выделения, можно его снять в обработчике события, после того, как оно уже произошло.

Для этого мы используем методы работы с выделением, которые описаны в отдельной главе Выделение: Range, TextRange и Selection. Здесь нам понадобится всего лишь одна функция clearSelection , которая будет снимать выделение.

Пример со снятием выделения при двойном клике на элемент списка:

У этого подхода есть две особенности, на которые стоит обратить внимание:

• Выделение всё же производится, но тут же снимается. Это выглядит как мигание и не очень красиво.
• Выделение при помощи передвижения зажатой мыши всё ещё работает, так что посетитель имеет возможность выделить содержимое элемента.

Способ 3: свойство user-select

Существует нестандартное CSS-свойство user-select , которое делает элемент невыделяемым.

Оно когда-то планировалось в стандарте CSS3, потом от него отказались, но поддержка в браузерах уже была сделана и потому осталась.

Это свойство работает (с префиксом) везде, кроме IE9-:

  Строка до.. 
Этот текст нельзя выделить (кроме IE9-) 
 .. Строка после

IE9-: атрибут unselectable=«on»

В IE9- нет user-select , но есть атрибут unselectable.

Он отменяет выделение, но у него есть особенности:

1. Во-первых, невыделяемость не наследуется. То есть, невыделяемость родителя не делает невыделяемыми детей.
2. Во-вторых, текст, в отличие от user-select , всё равно можно выделить, если начать выделение не на самом элементе, а рядом с ним.

 
Этот текст невыделяем в IE, кроме дочерних элементов 

Левая часть текста в IE не выделяется при двойном клике. Правую часть ( em ) можно выделить, т.к. на ней нет атрибута unselectable .

Этот текст невыделяем в IE, кроме дочерних элементов

Итого

Для отмены выделения есть несколько способов:

1. CSS-свойство user-select – везде кроме IE9- (нужен префикс, нестандарт).
2. Атрибут unselectable=»on» – работает для любых IE (должен быть у всех потомков)
3. Отмена действий на mousedown и selectstart :

elem.onmousedown = elem.onselectstart = function() < return false; >;

Какой же способ выбирать?

Это зависит от задач и вашего удобства, а также конкретного случая. Все описанные способы работают.

Недостаток user-select – в том, что посетитель теряет возможность скопировать текст. А что, если он захочет именно это сделать?

В любом случае эти способы не предназначены для защиты от выделения-и-копирования.

Если уж хочется запретить копирование – можно использовать событие oncopy :

 
Уважаемый копирователь, почему-то автор хочет заставить вас покопаться в исходном коде этой страницы. Если вы знаете JS или HTML, то скопировать текст не составит для вас проблемы, ну а если нет, то увы.
 

Как запретить выделение содержимого на вебстранице?

дык, так этот трюк защитит только от детей, кто захочет тот выделит то что надо и скопирует, или это не про защиту текста?

5 мар 2012 в 16:10
Да нет я просто делаю окна которые перетаскиваются мышкой и выделение мешает!
5 мар 2012 в 16:12

От блондинок можно, от бытых юзеров нет! Методов масса как обойти блокировки. Так что проще не морочить себе голову) ИМХО!

6 мар 2012 в 16:35

6 ответов 6

Сортировка: Сброс на вариант по умолчанию

*[unselectable=on] < -moz-user-select: none; -o-user-select:none; -khtml-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; >для IE unselectable="on" 

Отслеживать
ответ дан 5 мар 2012 в 16:10
1,544 13 13 серебряных знаков 27 27 бронзовых знаков
Это не запрещает выделение.
5 мар 2012 в 19:39
@exec а что же это делает?
6 фев 2017 в 18:40

.no-select

.no-select

Отслеживать
ответ дан 6 фев 2017 в 18:27
user232857 user232857

Это останавливает выделение! У меня в Drag&Drop работает так.

elem.onselectstart = function() < return false; >; 

Отслеживать
ответ дан 5 мар 2012 в 16:19
Сергей Степанов Сергей Степанов
226 1 1 серебряный знак 10 10 бронзовых знаков

According to Can I use, the user-select is currently supported in all browsers except Internet Explorer 9 and earlier versions (but sadly still needs a vendor prefix).

All of the correct CSS variations are:

.noselect < -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Safari */ -khtml-user-select: none; /* Konqueror HTML */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */ > 
Selectable text.
 
Unselectable text.
 

Отслеживать
ответ дан 6 мар 2017 в 4:28
2,115 1 1 золотой знак 9 9 серебряных знаков 15 15 бронзовых знаков

А как сделать, чтобы value в Input нельзя было выделить? из статьи на Хабре просто сразу говориться (кроме элементов INPUT и TEXTAREA)

8 фев 2020 в 12:38

Поставьте div в position: absolute; и слоем выше всех остальных элементов. Смотрите пример

HTML

CSS

html, body < width: 100%; height: 100%; margin: 0; padding: 0; >#cover

Отслеживать
ответ дан 5 мар 2012 в 16:19
33.9k 1 1 золотой знак 31 31 серебряный знак 49 49 бронзовых знаков
Выделил спокойно.
5 мар 2012 в 19:39

Аха..))) И почему у меня ощущение, что знакомые вас не долюбливают за занудство? ))) В самом первом коментарии, makregistr дал исчерпывающий ответ. Просто люди предлагали возможные варианты, а не ломали головы, как на все сто процентов решить проблему.

5 мар 2012 в 20:09
Я пришол к выводу что надо всё три ответа засунить на вебстраницу одновременно и всё будет ОК:)
6 мар 2012 в 16:10
спасибо 011010101010011 за проверку вариантов!
6 мар 2012 в 16:11

@Rules, на Ваш вопрос есть ответ, просто нужно искать. Пихать что попало не нужно, читаем — [habrahabr.ru/blogs/webdev/18080/][1] [1]: habrahabr.ru/blogs/webdev/18080

6 мар 2012 в 18:50

Человек уже давал ссылку на хабр. Их решение работает! Вот оно:

function preventSelection(element) < var preventSelection = false; function addHandler(element, event, handler)< if (element.attachEvent) element.attachEvent('on' + event, handler); else if (element.addEventListener) element.addEventListener(event, handler, false); >function removeSelection() < if (window.getSelection) < window.getSelection().removeAllRanges(); >else if (document.selection && document.selection.clear) document.selection.clear(); > function killCtrlA(event) < var event = event || window.event; var sender = event.target || event.srcElement; if (sender.tagName.match(/INPUT|TEXTAREA/i)) return; var key = event.keyCode || event.which; if (event.ctrlKey && key == 'A'.charCodeAt(0)) // 'A'.charCodeAt(0) можно заменить на 65 < removeSelection(); if (event.preventDefault) event.preventDefault(); else event.returnValue = false; >> // не даем выделять текст мышкой addHandler(element, 'mousemove', function()< if(preventSelection) removeSelection(); >); addHandler(element, 'mousedown', function(event)< var event = event || window.event; var sender = event.target || event.srcElement; preventSelection = !sender.tagName.match(/INPUT|TEXTAREA/i); >); // борем dblclick // если вешать функцию не на событие dblclick, можно избежать // временное выделение текста в некоторых браузерах addHandler(element, 'mouseup', function()< if (preventSelection) removeSelection(); preventSelection = false; >); // борем ctrl+A // скорей всего это и не надо, к тому же есть подозрение // что в случае все же такой необходимости функцию нужно // вешать один раз и на document, а не на элемент addHandler(element, 'keydown', killCtrlA); addHandler(element, 'keyup', killCtrlA); >