Using user-select

Highlighting text in order to copy, cut or paste content is a staple action across the web. Now, what if I told you the ability to control what a user can select is configurable with a single CSS property?

Introducing the CSS property

Simply put, the…


This content originally appeared on Ugly Duck and was authored by Bradley Taunt

Highlighting text in order to copy, cut or paste content is a staple action across the web. Now, what if I told you the ability to control what a user can select is configurable with a single CSS property?

Introducing the CSS property

Simply put, the user-select property is defined as follows:

user-select controls whether the user can select text (cursor or otherwise)

The CSS

The property’s available attributes are very straightforward (just remember to target specific browsers for full support!)

/* Default */
p.default {
    user-select: auto;
    -moz-user-select: auto;
    -webkit-user-select: auto;
}

/* Disable the user from selecting text */
p.no-select {
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
}

/* Select all text when user clicks */
p.select-all {
    user-select: all;
    -moz-user-select: all;
    -webkit-user-select: all;
}

Let’s see it in action

Try selecting the separate paragraph elements in the CodePen below:

See the Pen CSS: User Select Property by Bradley Taunt (@bradleytaunt) on CodePen.

Browser Support

The great news is user-select is fully supported across all modern browsers (even as far back as IE10!) ?


This content originally appeared on Ugly Duck and was authored by Bradley Taunt


Print Share Comment Cite Upload Translate Updates
APA

Bradley Taunt | Sciencx (2019-06-04T00:00:00+00:00) Using user-select. Retrieved from https://www.scien.cx/2019/06/04/using-user-select/

MLA
" » Using user-select." Bradley Taunt | Sciencx - Tuesday June 4, 2019, https://www.scien.cx/2019/06/04/using-user-select/
HARVARD
Bradley Taunt | Sciencx Tuesday June 4, 2019 » Using user-select., viewed ,<https://www.scien.cx/2019/06/04/using-user-select/>
VANCOUVER
Bradley Taunt | Sciencx - » Using user-select. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2019/06/04/using-user-select/
CHICAGO
" » Using user-select." Bradley Taunt | Sciencx - Accessed . https://www.scien.cx/2019/06/04/using-user-select/
IEEE
" » Using user-select." Bradley Taunt | Sciencx [Online]. Available: https://www.scien.cx/2019/06/04/using-user-select/. [Accessed: ]
rf:citation
» Using user-select | Bradley Taunt | Sciencx | https://www.scien.cx/2019/06/04/using-user-select/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts