From dcfb172704f3afb68a30425029ec834be2883274 Mon Sep 17 00:00:00 2001 From: bt Date: Sat, 8 Jun 2024 13:22:19 -0400 Subject: More content porting, on-going markdown changes for lowdown support --- build/user-select/index.html | 43 +++++++++++++++++++++++++++++-------------- 1 file changed, 29 insertions(+), 14 deletions(-) (limited to 'build/user-select') diff --git a/build/user-select/index.html b/build/user-select/index.html index 71f065e..0bf3d23 100644 --- a/build/user-select/index.html +++ b/build/user-select/index.html @@ -1,53 +1,68 @@ - + Using User-Select - - + + +
-

Using User-Select

+

Using User-Select

+

2019-06-04

+

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

+ +

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)

+ +
+

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 */
+
+
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 */
+/* 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 */
+/* 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

+
+
Let’s see it in action

+
 
Try selecting the separate paragraph elements in the CodePen below:

+
 
Live CodePen Example

-
Browser Support

+
+
Browser Support

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