Css select selected text

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

Источник

::selection

The ::selection CSS pseudo-element applies styles to the part of a document that has been highlighted by the user (such as clicking and dragging the mouse across text).

Try it

Allowable properties

Only certain CSS properties can be used with ::selection :

In particular, background-image is ignored.

Syntax

Examples

HTML

p>Also try selecting text in this paragraph.p> 

CSS

::-moz-selection  color: gold; background-color: red; > p::-moz-selection  color: white; background-color: blue; > 

/* Make selected text gold on a red background */ ::selection  color: gold; background-color: red; > /* Make selected text in a paragraph white on a blue background */ p::selection  color: white; background-color: blue; > 

Result

Accessibility concerns

Don’t override selected text styles for purely aesthetic reasons — users can customize them to suit their needs. For people experiencing cognitive concerns or who are less technologically literate, unexpected changes to selection styles may hurt their understanding of the functionality.

If overridden, it is important to ensure that the contrast ratio between the text and background colors of the selection is high enough that people experiencing low vision conditions can read it.

Color contrast ratio is found by comparing the luminosity of the selected text and the selected text background colors. To meet current Web Content Accessibility Guidelines (WCAG), text content must have a contrast ratio of 4.5:1, or 3:1 for larger text such as headings. (WCAG defines large text as between 18.66px and 24px and bold, or 24px or larger.)

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Feb 21, 2023 by MDN contributors.

Your blueprint for a better internet.

Источник

Using CSS to Control Text Selection

CSS lets you control how text selection behaves and appears on your pages. This can help you improve usability in certain situations and add a little bit of visual flair. Let’s dive in!

Select All

Sometimes it’s nice to have all the text in an element automatically selected when you click on it. This is particularly handy for text that is copied/pasted in full (code snippets, one-time passwords, promotional codes, etc.).

You can accomplish this with some simple CSS. No JavaScript required!

div  
-webkit-user-select: all; /* for Safari */ 
user-select: all;
>

Here’s a demo. Bad news, it doesn’t work on iOS. Good news, it degrades gracefully, so the text is still selectable.

See the Pen Select All by Will Boyd (@lonekorean) on CodePen.

Select All… Then Select Some

While this works as expected, you may notice something annoying: it is impossible to select anything less than the entire code snippet. Wouldn’t it be nice if the first click selected all, but you could still click again and select just a portion? CSS can do this.

First, use tabindex to make the element holding the text focusable. This gives the CSS a way to know when the element has been clicked.

code tabindex="0">code snippet goes herecode>

code  
-webkit-user-select: all; 
user-select: all;
>

code:focus  
animation: select 100ms step-end forwards;
>

@keyframes select  
to  
-webkit-user-select: text; 
user-select: text; 
>
>

The idea is to have user-select: all on the element initially, then switch to the “normal” user-select: text after the element has focus so that text can be freely re-selected. The tricky part is the timing. Do the switch immediately upon focus and user-select: all is gone before it has a chance to do its job. That’s where animation comes in.

Yes, user-select is animatable! More specifically, it is discretely animatable, meaning there is no gradual interpolated animation, but rather an immediate cut from one state to another. Armed with this knowledge, we can use animation to delay the change in select behavior until 100ms after focus. Perfect.

Again, the “select all” bit doesn’t work on iOS. Meanwhile, desktop Safari keeps the text as “select all”. This trick seems to work fine elsewhere, though.

Preventing Text Selection

You can also use CSS to make text in an element unselectable.

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

This is probably a bad idea for body text, but I’ve found it useful for controls that might be toggled quickly or “rage clicked” in desktop browsers, since double clicking causes text to be selected and highlighted, which can look a little weird sometimes.

See for yourself in the following demo. Notice how the toggle on the left becomes highlighted when rapidly clicked, while the one on the right doesn’t.

This technique also works on disclosure widgets. Fake buttons — like a with a click handler on it — are another candidate. Bear in mind that using a real is preferable, not only for semantics and accessibility, but also because text in a is unselectable by default, avoiding the issue to begin with.

Selectively Selecting Text

Unselectable text can be mixed into selectable text. The unselectable bits are simply skipped over when text is selected and will be omitted when the selection is copied/pasted.

The demo below uses user-select: none on the numerical footnote markers. So when you copy/paste, the markers are automatically removed for you.

Sadly, some browsers won’t play along. Safari (iOS and desktop) and Android Chrome will still copy the markers.

Styling the Selection

You can style text selections by targeting the ::selection pseudo-element. However, your options are limited to 3 properties: color , background-color , and text-shadow (there are more defined in the spec, but browsers don’t support them).

Here’s an example that styles the selected text in a

.

p::selection  
color: #fffaa5; 
background-color: #f38630; 
text-shadow: 2px 2px #31808c;
>

Try selecting some text in the demo below to see the result. Unfortunately, iOS is the holdout once again, but everyone else should see fancier colors.

Odds and Ends

There’s another declaration, user-select: contain , that is supposed to confine text selections to within an element, like you’d see with a . Oddly enough, IE11 was the last browser to support it. No modern browsers support it currently.

That said, all editable elements (such as ) are treated as if they had user-select: contain . And the ::before and ::after pseudo-elements are unselectable, as if they had user-select: none . You cannot override these behaviors.

Going Further

This article is about CSS, but I would be remiss if I didn’t mention the relevant JavaScript.

If you want full control over text selections, with the ability to create and modify them at will, then check out the JavaScript Selection API. If the end goal is to copy/paste text, then you should know that JavaScript also allows you to interact with the clipboard.

Источник