Text not selectable css

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> 

Источник

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

Источник

How to Make Text Unselectable Using CSS

It is important to secure personal information and private details on web pages. This type of information could be in various formats, such as images, videos, and text forms. The most unsafe form is text

because it is clear and easy to copy from one place to another. To tackle such situations, you can make the text unselectable using some special CSS selectors or properties.

This write-up will provide a detailed guide on how you can make some text unselectable in CSS

How to Make Text Unselectable Using CSS?

In CSS, to make text unselectable, we will use the following term:

Let’s explore each property one by one!

Method 1: Make Text Unselectable Using CSS user-select Property

The “user-select” property decides the behavior of how the text of an element will be selected. When the “none” value is assigned to this property, it restricts the selection of text.

Let’s explore more about this property by checking out the example below.

Currently, we have a text on our page in the selected state, and we want to make this text unselectable with the help of CSS:

In our HTML file, we will assign some text to the “ ” tag and mention it inside the tag.

In the CSS file, simply utilize the “user-select” property with the value “none”.This will make the text unselectable respectively.

Now, save the mentioned code and open it in your favorite browser:

Want to learn something more interesting? Let’s move toward method two.

Method 2: Make Text Unselectable Using CSS ::selection Selector

In CSS, the “::selection” selector is used to style the selected part of an element. Only a few CSS properties can be utilized with this selector, such as background, color, outline, and cursor.

Set the “::selection” selector with the

element. In the next step, specify the “background” property with the value “rgba(0, 0, 0, 0)”. This will make the text selection transparent.

Note: Using the combination of the specified selector and CSS property will still make the text selectable; however, no one will know whether the text is selected or not because of its transparency:

We have covered the simplest methods to make text unselectable in CSS.

Conclusion

To make the text unselectable, the “user-select” property and “::selection” selector can be used. Simply setting the user-select property to none will make the text unselectable. Moreover, the ::selection selector can also be utilized with background property. In this post, you have learned how to make some text unselectable with the help of CSS

About the author

Shehroz Azam

A Javascript Developer & Linux enthusiast with 4 years of industrial experience and proven know-how to combine creative and usability viewpoints resulting in world-class web applications. I have experience working with Vue, React & Node.js & currently working on article writing and video creation.

Источник

How to disable text selection in CSS

On a web page, we typically should not disable text selection, but there are a few cases where having it enabled can take away from the user experience. Normally, we do not want to take away a user’s ability to select text, as that will lead to a bad user experience. There was a time when a small number of websites would stop users copying article text as a method of stopping plagiarism, but thankfully that is far less common today.

Having said that, there are a notable number of examples where disabling text selection can actually improve user experience. For example:

• On HTML elements that trigger events, especially on mobile — where tapping or double tapping might lead to text selection
• On drag and drop interfaces, where a user has to drag an element — we don’t want that drag to trigger text selection too.
• On many other custom web-built user applications where text selection needs to be limited to certain elements or situations. For example, on a text editor, we usually don’t want the button that makes text bold to be selectable, since it is a button.

If you do decide to disable text selection, there is fortunately an easy way to accomplish this in CSS.

How to disable text selection in CSS

All modern browsers (with the exception of some versions of Safari) support the user-select property, which makes any HTML element unselectable. For example, if you wanted all buttons not be selectable, you could write the following:

button   -webkit-user-select: none;  user-select: none; > 

We have to use -webkit-user-select since Safari still requires it. If you want to support Internet Explorer (which is becoming less and less common), you can also use -ms-user-select :

button   -ms-user-select: none;  -webkit-user-select: none;  user-select: none; > 

This single property will stop user selection. user-select also has other properties, in theory, but the support for these vary.

• user-select: none — no user select on the element.
• user-select: text — you can only select the text within the element
• user-select: all — tapping once will select the entire elements content.
• user-select: auto — the default, lets you select everything like normal.

To show you how each works, here are some examples. Note, both text and all have limited Safari support, so consider trying these out in Chrome.

user-select set to none

This is equivalent to user-select: none .

You won’t be able to select this text!

user-select set to all

This is equivalent to user-select: all .

Tapping once on this will lead to you selecting all of the text.

user-select set to text

This example does not differ too much from user-select: auto .

You will only be able to select the text in this element.

More Tips and Tricks for CSS

Источник