Webkit user select что это

user-select

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

Краткая информация

Значение по умолчанию	auto
Наследуется	Да
Применяется	Ко всем элементам
Процентная запись	Неприменима
Анимируется	Нет

Синтаксис

user-select: auto | none | text | all | contain

Описание	Пример
	Указывает тип значения.
A && B	Значения должны выводиться в указанном порядке.	&&
A | B	Указывает, что надо выбрать только одно значение из предложенных (A или B).	normal | small-caps
A || B	Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.	width || count
[ ]	Группирует значения.	[ crop || cross ]
*	Повторять ноль или больше раз.	[,]*
+	Повторять один или больше раз.	+
?	Указанный тип, слово или группа не является обязательным.	inset?
	Повторять не менее A, но не более B раз.
#	Повторять один или больше раз через запятую.	#

Значения

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

Пример

Примечание

Internet Explorer и Edge поддерживают свойство -ms-user-select .

Chrome до версии 54, Opera до версии 41, Safari и Android поддерживают свойство -webkit-user-select .

Firefox поддерживает свойство -moz-user-select .

Значение contain поддерживается только в IE.

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

Спецификация	Статус
CSS Basic User Interface Module Level 4	Редакторский черновик

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

Каждая спецификация проходит несколько стадий одобрения.

• Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
• Candidate Recommendation ( Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
• Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
• Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
• Editor’s draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
• Draft ( Черновик спецификации ) — первая черновая версия стандарта.

Браузеры

10

12

4

54

15

41

3.1

2

2.1

2

37

3.2

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

• — элемент полностью поддерживается браузером;
• — элемент браузером не воспринимается и игнорируется;
• — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

Число указывает версию браузреа, начиная с которой элемент поддерживается.

Справочник CSS

• !important
• ::after
• ::backdrop
• ::before
• ::first-letter
• ::first-line
• ::marker
• ::placeholder
• ::selection
• :active
• :blank
• :buffering
• :checked
• :default
• :dir
• :disabled
• :empty
• :enabled
• :first-child
• :first-of-type
• :focus
• :focus-within
• :fullscreen
• :hover
• :in-range
• :indeterminate
• :invalid
• :is()
• :lang()
• :last-child
• :last-of-type
• :link
• :muted
• :not()
• :nth-child()
• :nth-last-child()
• :nth-last-of-type()
• :nth-of-type()
• :only-child
• :only-of-type
• :optional
• :out-of-range
• :paused
• :placeholder-shown
• :playing
• :read-only
• :read-write
• :required
• :root
• :seeking
• :stalled
• :target
• :valid
• :visited
• :volume-locked
• @charset
• @document
• @font-face
• @import
• @keyframes
• @media
• @page
• @supports
• @viewport
• accent-color
• align-content
• align-items
• align-self
• all
• animation
• animation-delay
• animation-direction
• animation-duration
• animation-fill-mode
• animation-iteration-count
• animation-name
• animation-play-state
• animation-timing-function
• aspect-ratio
• backdrop-filter
• backface-visibility
• background
• background-attachment
• background-blend-mode
• background-clip
• background-color
• background-image
• background-origin
• background-position
• background-position-x
• background-position-y
• background-repeat
• background-size
• block-size
• border
• border-bottom
• border-bottom-color
• border-bottom-left-radius
• border-bottom-right-radius
• border-bottom-style
• border-bottom-width
• border-collapse
• border-color
• border-image
• border-left
• border-left-color
• border-left-style
• border-left-width
• border-radius
• border-right
• border-right-color
• border-right-style
• border-right-width
• border-spacing
• border-style
• border-top
• border-top-color
• border-top-left-radius
• border-top-right-radius
• border-top-style
• border-top-width
• border-width
• bottom
• box-decoration-break
• box-shadow
• box-sizing
• caption-side
• caret-color
• clear
• clip
• color
• column-count
• column-fill
• column-gap
• column-rule
• column-rule-color
• column-rule-style
• column-rule-width
• column-span
• column-width
• columns
• content
• counter-increment
• counter-reset
• cursor
• direction
• display
• empty-cells
• filter
• flex
• flex-basis
• flex-direction
• flex-flow
• flex-grow
• flex-shrink
• flex-wrap
• float
• font
• font-family
• font-kerning
• font-size
• font-stretch
• font-style
• font-variant
• font-weight
• gap
• height
• hyphenate-character
• hyphenate-limit-chars
• hyphens
• image-rendering
• justify-content
• left
• letter-spacing
• line-clamp
• line-height
• list-style
• list-style-image
• list-style-position
• list-style-type
• margin
• margin-bottom
• margin-left
• margin-right
• margin-top
• marks
• max-height
• max-width
• min-height
• min-width
• mix-blend-mode
• object-fit
• opacity
• order
• orphans
• outline
• outline-color
• outline-offset
• outline-style
• outline-width
• overflow
• overflow-x
• overflow-y
• padding
• padding-block
• padding-block-end
• padding-block-start
• padding-bottom
• padding-inline
• padding-inline-end
• padding-inline-start
• padding-left
• padding-right
• padding-top
• page-break-after
• page-break-before
• page-break-inside
• perspective
• perspective-origin
• place-content
• pointer-events
• position
• quotes
• resize
• right
• row-gap
• scroll-behavior
• tab-size
• table-layout
• text-align
• text-align-last
• text-decoration
• text-decoration-color
• text-decoration-line
• text-decoration-skip-ink
• text-decoration-style
• text-emphasis
• text-emphasis-color
• text-emphasis-position
• text-emphasis-style
• text-fill-color
• text-indent
• text-orientation
• text-overflow
• text-shadow
• text-stroke
• text-stroke-color
• text-stroke-width
• text-transform
• top
• transform
• transform-origin
• transform-style
• transition
• transition-delay
• transition-duration
• transition-property
• transition-timing-function
• unicode-bidi
• user-select
• vertical-align
• visibility
• white-space
• widows
• width
• word-break
• word-spacing
• word-wrap
• writing-mode
• z-index
• zoom

user — select

Свойство CSS, которое разрешает или запрещает возможность выбора текста.

Время чтения: меньше 5 мин

Открыть/закрыть навигацию по статье

Обновлено 5 июля 2023

Кратко

Скопировать ссылку «Кратко» Скопировано

Свойство user — select определяет, может ли пользователь выбрать текст в элементе, для которого это свойство задано.

Пример

Скопировать ссылку «Пример» Скопировано

Добавим к тексту user — select , чтобы он не выделялся мышкой.

 p  user-select: none;> p  user-select: none; >    Скопировать Скопировано Не удалось скопировать   

Как пишется

Скопировать ссылку «Как пишется» Скопировано

• none — текст внутри элемента нельзя выделить и, как следствие, скопировать.
• text — текст может быть выделен.
• all — весь текст, включая текст в дочерних элементах, может быть выделен.
• contain — может быть выделен только текст элемента, которому задано свойство.
• auto — значение вычисляется в зависимости от элемента:
  • для редактируемого элемента (атрибут contenteditable ) значение будет contain ;
  • для псевдоэлементов : : before и : : after значение будет none ;
  • значения user — select : all и user — select : none наследуются от родителя.
  • иначе значение будет text .

  Подсказки

  Скопировать ссылку «Подсказки» Скопировано

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

  Свойство -webkit-user-select

  Свойство -webkit-user-select определяет может ли пользователь выделить контент элемента.

  Допустимые значения

  • auto — пользователь может выделить контент в элементе
  • none — пользователь не может выделить контент в элементе
  • text — пользователь может выделить в элементе только текст
  • Safari 3.0 и выше (в Safari 2.0 используется -khtml-user-select)
  • Chrome 1.0 и выше

  Пример

  .block <
  -webkit-user-select: read-write-plaintext-only;
  >

  По теме

  • Вендорные префиксы. Что это?
  • Свойство -webkit-user-drag
  • Свойство -webkit-user-modify

  Показать комментарии

  Статьи этого раздела

  • CSS свойство -webkit-animation | назначение, допустимые значения, примеры
  • CSS свойство -webkit-animation-delay | назначение, допустимые значения, примеры
  • CSS свойство -webkit-animation-direction | назначение, допустимые значения, примеры
  • CSS свойство -webkit-animation-duration | назначение, допустимые значения, примеры
  • CSS свойство -webkit-animation-fill-mode | назначение, допустимые значения, примеры
  • CSS свойство -webkit-animation-iteration-count | назначение, допустимые значения, примеры
  • CSS свойство -webkit-animation-name | назначение, допустимые значения, примеры
  • CSS свойство -webkit-animation-play-state | назначение, допустимые значения, примеры
  • CSS свойство -webkit-backface-visibility | назначение, допустимые значения, примеры
  • CSS свойство -webkit-background-clip
  • CSS свойство -webkit-background-composite | назначение, допустимые значения, примеры
  • CSS свойство -webkit-background-origin | назначение, допустимые значения, примеры
  • CSS свойство -webkit-background-size | назначение, допустимые значения, примеры
  • CSS свойство -webkit-border-bottom-left-radius | назначение, допустимые значения, примеры
  • CSS свойство -webkit-border-bottom-right-radius | назначение, допустимые значения, примеры
  • CSS свойство -webkit-border-horizontal-spacing | назначение, допустимые значения, примеры
  • CSS свойство -webkit-border-radius | назначение, допустимые значения, примеры
  • CSS свойство -webkit-border-top-left-radius | назначение, допустимые значения, примеры
  • CSS свойство -webkit-border-top-right-radius | назначение, допустимые значения, примеры
  • CSS свойство -webkit-border-vertical-spacing | назначение, допустимые значения, примеры
  • CSS свойство -webkit-column-break-after | назначение, допустимые значения, примеры
  • CSS свойство -webkit-column-break-before | назначение, допустимые значения, примеры
  • CSS свойство -webkit-column-break-inside | назначение, допустимые значения, примеры
  • CSS свойство -webkit-column-count | назначение, допустимые значения, примеры
  • CSS свойство -webkit-column-gap | назначение, допустимые значения, примеры
  • CSS свойство -webkit-column-rule | назначение, допустимые значения, примеры
  • CSS свойство -webkit-column-rule-color | назначение, допустимые значения, примеры
  • CSS свойство -webkit-column-rule-style | назначение, допустимые значения, примеры
  • CSS свойство -webkit-column-rule-width | назначение, допустимые значения, примеры
  • CSS свойство -webkit-column-width | назначение, допустимые значения, примеры
  • CSS свойство -webkit-columns | назначение, допустимые значения, примеры
  • CSS свойство -webkit-line-break | назначение, допустимые значения, примеры
  • CSS свойство -webkit-marquee | назначение, допустимые значения, примеры
  • CSS свойство -webkit-marquee-direction | назначение, допустимые значения, примеры
  • CSS свойство -webkit-marquee-repetition | назначение, допустимые значения, примеры
  • CSS свойство -webkit-marquee-speed | назначение, допустимые значения, примеры
  • CSS свойство -webkit-marquee-style | назначение, допустимые значения, примеры
  • CSS свойство -webkit-mask | назначение, допустимые значения, примеры
  • CSS свойство -webkit-mask-attachment | назначение, допустимые значения, примеры
  • CSS свойство -webkit-mask-box-image | назначение, допустимые значения, примеры
  • CSS свойство -webkit-mask-clip | назначение, допустимые значения, примеры
  • CSS свойство -webkit-mask-composite | назначение, допустимые значения, примеры
  • CSS свойство -webkit-mask-image
  • CSS свойство -webkit-mask-origin | назначение, допустимые значения, примеры
  • CSS свойство -webkit-mask-position | назначение, допустимые значения, примеры
  • CSS свойство -webkit-mask-position-x | назначение, допустимые значения, примеры
  • CSS свойство -webkit-mask-position-y | назначение, допустимые значения, примеры
  • CSS свойство -webkit-mask-repeat | назначение, допустимые значения, примеры
  • CSS свойство -webkit-mask-size | назначение, допустимые значения, примеры
  • CSS свойство -webkit-nbsp-mode | назначение, допустимые значения, примеры
  • CSS свойство -webkit-perspective | назначение, допустимые значения, примеры
  • CSS свойство -webkit-perspective-origin | назначение, допустимые значения, примеры
  • CSS свойство -webkit-rtl-ordering | назначение, допустимые значения, примеры
  • CSS свойство -webkit-text-fill-color | назначение, допустимые значения, примеры
  • CSS свойство -webkit-text-security | назначение, допустимые значения, примеры
  • CSS свойство -webkit-text-stroke | назначение, допустимые значения, примеры
  • CSS свойство -webkit-text-stroke-color | назначение, допустимые значения, примеры
  • CSS свойство -webkit-text-stroke-width | назначение, допустимые значения, примеры
  • CSS свойство -webkit-transform | назначение, допустимые значения, примеры
  • CSS свойство -webkit-transform-origin-x | назначение, допустимые значения, примеры
  • CSS свойство -webkit-transform-origin-y | назначение, допустимые значения, примеры
  • CSS свойство -webkit-transform-origin-z | назначение, допустимые значения, примеры
  • CSS свойство -webkit-transform-style | назначение, допустимые значения, примеры
  • CSS свойство -webkit-transition-property | назначение, допустимые значения, примеры
  • CSS свойство -webkit-user-drag | назначение, допустимые значения, примеры
  • CSS свойство -webkit-user-modify | назначение, допустимые значения, примеры
  • CSS свойство -webkit-user-select | назначение, допустимые значения, примеры
  • Ошибка 404 — Страница не найдена
  • Свойство -webkit-animation-timing-function | назначение, допустимые значения, примеры
  • Свойство -webkit-appearance | назначение, допустимые значения, примеры
  • Свойство -webkit-border-image | назначение, допустимые значения, примеры
  • Свойство -webkit-box-align | назначение, допустимые значения, примеры
  • Свойство -webkit-box-direction | назначение, допустимые значения, примеры
  • Свойство -webkit-box-flex | назначение, допустимые значения, примеры
  • Свойство -webkit-box-flex-group | назначение, допустимые значения, примеры
  • Свойство -webkit-box-lines | назначение, допустимые значения, примеры
  • Свойство -webkit-box-ordinal-group | назначение, допустимые значения, примеры
  • Свойство -webkit-box-orient | назначение, допустимые значения, примеры
  • Свойство -webkit-box-pack | назначение, допустимые значения, примеры
  • Свойство -webkit-box-reflect | назначение, допустимые значения, примеры
  • Свойство -webkit-box-shadow | назначение, допустимые значения, примеры
  • Свойство -webkit-box-sizing | назначение, допустимые значения, примеры
  • Свойство -webkit-margin-bottom-collapse | назначение, допустимые значения, примеры
  • Свойство -webkit-margin-collapse | назначение, допустимые значения, примеры
  • Свойство -webkit-margin-start | назначение, допустимые значения, примеры
  • Свойство -webkit-margin-top-collapse | назначение, допустимые значения, примеры
  • Свойство -webkit-padding-start | назначение, допустимые значения, примеры
  • Свойство -webkit-transition | назначение, допустимые значения, примеры
  • Свойство -webkit-transition-delay | назначение, допустимые значения, примеры
  • Свойство -webkit-transition-duration | назначение, допустимые значения, примеры
  • Свойство -webkit-transition-timing-function | назначение, допустимые значения, примеры

  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; 

  Значения¶

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

  Пользователю запрещено выделять элемент.

  Пользователь может выделить текст в элементе.

  Позволяет выделить текст внутри элемента, включая дочерние элементы.

  Позволяет выделять текст, но только внутри границ элемента.

  Примечание¶

  • 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> 

  Похожие публикации:

  1. Disk soft light bus service что это
  2. Xyplorer что это за программа
  3. Как добавить текст надписи к графическому изображению
  4. Как зайти в роутер tp link