Css styling selected text

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.

Источник

::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.

Источник

::selection

Use your cursor select this sentence. Notice how as you select the text a background color fills the space? You can change the background color and color of selected text by styling ::selection . Styling this pseudo element is great for matching user-selected text to your sites color scheme.

Take note that the double colon is necessary in the syntax for this pseudo element, despite that other pseudo-elements accept a single colon. As seen above, you can style ::selection on individual elements. You can also style the entire page by dropping the bare pseudo-element in your stylesheet.

• color
• background (specifically the background-color , background-image longhand properties)
• text-shadow

If you try to style ::selection with a property that’s not on the list, then that property will be ignored. It may be tricky seeing background in that list because the property will only render a color when used on ::selection and it won’t render a background image or gradient.

When browsers find a part of a select they don’t understand, they drop the entire thing, so this will fail all the time.

One of the most helpful uses for ::selection is turning off a text-shadow during selection. A text-shadow can clash with the selection’s background color and make the text difficult to read. Set text-shadow: none; to make text clear and easy to read during selection.

Paired with Sass, or any other preprocessor, you can make really cool effects with ::selection . Select the text in the demo below:

You might notice the effect is not so smooth in some browsers. Let’s file that demo under: things that are possible, but probably just for fun.

This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.

Desktop

Mobile / Tablet

Источник

How TO — Change Text Selection Color

Learn how to override the default text selection color with CSS.

Text Selection Color

Select the following text:

Default text selection color

Custom text selection color

How To Change Text Selection Color

Use the ::selection selector to override the default text selection color:

Example

::selection color: red;
background: yellow;
>

Tip: Read more about the ::selection selector in our CSS Reference: CSS ::selection Property.

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник