Css user select img

user-select¶

Свойство user-select управляет поведением выделения текста и других элементов на странице, в частности, позволяет запретить выделение текста.

Обычно применяется для интерактивных элементов, на которые можно щёлкать, например, вкладки, и для которых выделение текста нежелательно.

Демо¶

Синтаксис¶

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

/* Keyword values */ user-select: none; user-select: auto; user-select: text; user-select: contain; user-select: all; /* Global values */ user-select: inherit; user-select: initial; user-select: unset; /* Mozilla-specific values */ -moz-user-select: none; -moz-user-select: text; -moz-user-select: all; /* WebKit-specific values */ -webkit-user-select: none; -webkit-user-select: text; /* Doesn't work in Safari; use only "none" or "text", or else it will allow typing in the container */ -webkit-user-select: all; /* Microsoft-specific values */ -ms-user-select: none; -ms-user-select: text; -ms-user-select: element; 

Значения¶

auto Для редактируемых элементов значение принимается contain . Если у родителя значение user-select установлено как all , то для элемента оно тоже будет all . Если у родителя значение user-select установлено как none , то для элемента оно тоже будет none . Во всех остальных случаях принимается значение text . none Пользователю запрещено выделять элемент. text Пользователь может выделить текст в элементе. all Позволяет выделить текст внутри элемента, включая дочерние элементы. contain Позволяет выделять текст, но только внутри границ элемента.

Примечание¶

• Internet Explorer поддерживает свойство -ms-user-select .
• Chrome, Opera, Safari и Android поддерживают свойство -webkit-user-select .
• Firefox поддерживает свойство -moz-user-select .
• Значение contain поддерживается только в IE.

Значение по-умолчанию: auto

Применяется ко всем элементам

Спецификации¶

Поддержка браузерами¶

Can I Use user-select-none? Data on support for the user-select-none feature across the major browsers from caniuse.com.

Описание и примеры¶

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32

html> head> meta charset="utf-8" /> title>user-selecttitle> style> body  -ms-user-select: none; -moz-user-select: none; -webkit-user-select: none; user-select: none; > .enable  -ms-user-select: all; -moz-user-select: all; -webkit-user-select: all; user-select: all; > style> head> body> p>Этот текст нельзя выделитьp> p> input type="text" value="Этот текст можно выделить" /> p> p class="enable"> Этот b>текстb> тоже можно выделить p> body> html> 

Источник

Выделение текста для копирования CSS

Если скопировать выделенный текст вместе с изображением , то вместо картинки будет содержимое её атрибута alt . Само изображение можно сохранить отдельно от текста. Щелчок по картинке не выделит текст всего элемента.

  
Если скопировать выделенный текст вместе с изображением  src="//4.bp.blogspot.com/-eJraU5lCufs/UFa8PpMUv8I/AAAAAAAADLQ/Y5SGHBd91-Q/s00/smail-bolshoi-palets-vverh.gif" alt="Смайлик «Большой палец вверх»" height="104" width="147" title="Отлично!"/>, то вместо картинки будет содержимое её атрибута alt. Само изображение можно сохранить отдельно от текста. Щелчок по картинке не выделит текст всего элемента.

  
Текст будет скопирован без картинки  src="//4.bp.blogspot.com/-eJraU5lCufs/UFa8PpMUv8I/AAAAAAAADLQ/Y5SGHBd91-Q/s00/smail-bolshoi-palets-vverh.gif" alt="Смайлик «Большой палец вверх»" height="104" width="147" title="Отлично!"/>. Само изображение можно сохранить отдельно от текста. Щелчок по картинке не выделит текст всего элемента.

  contenteditable --> 
contenteditable>Изменить меня с user-select: auto;
 
contenteditable>Изменить меня с user-select: all;
 
contenteditable>Изменить меня с user-select: none;

Активные псевдоэлементы ::before и ::after

  
Нельзя выделить и скопировать содержимое псевдоэлементов.

Источник

user-select

The user-select CSS property controls whether the user can select text. This doesn’t have any effect on content loaded as part of a browser’s user interface (its chrome), except in textboxes.

Try it

Syntax

/* Keyword values */ user-select: none; user-select: auto; user-select: text; user-select: contain; user-select: all; /* Global values */ user-select: inherit; user-select: initial; user-select: revert; user-select: revert-layer; user-select: unset; 

Note: user-select is not an inherited property, though the initial auto value makes it behave like it is inherited most of the time. WebKit/Chromium-based browsers do implement the property as inherited, which violates the behavior described in the spec, and this will bring some issues. Until now, Chromium has chosen to fix the issues to make the final behavior meet the specifications.

Values

The text of the element and its sub-elements is not selectable. Note that the Selection object can contain these elements.

The used value of auto is determined as follows:

• On the ::before and ::after pseudo elements, the used value is none
• If the element is an editable element, the used value is contain
• Otherwise, if the used value of user-select on the parent of this element is all , the used value is all
• Otherwise, if the used value of user-select on the parent of this element is none , the used value is none
• Otherwise, the used value is text

The text can be selected by the user.

The content of the element shall be selected atomically: If a selection would contain part of the element, then the selection must contain the entire element including all its descendants. If a double-click or context-click occurred in sub-elements, the highest ancestor with this value will be selected.

Enables selection to start within the element; however, the selection will be contained by the bounds of that element.

Note: CSS UI 4 renamed the element value to contain .

Formal definition

Formal syntax

Источник

Как запретить выделение/копирование изображения | 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

Источник