From 07e4a2dafe248280b5610f8c7d09b0f30b530f54 Mon Sep 17 00:00:00 2001 From: Bradley Taunt Date: Mon, 10 Jun 2024 09:41:25 -0400 Subject: Initial modifications to rebuilt only changed files based on mod date, performance updates --- build/user-select/index.html | 75 -------------------------------------------- 1 file changed, 75 deletions(-) delete mode 100644 build/user-select/index.html (limited to 'build/user-select') diff --git a/build/user-select/index.html b/build/user-select/index.html deleted file mode 100644 index 55b94f4..0000000 --- a/build/user-select/index.html +++ /dev/null @@ -1,75 +0,0 @@ - - - - - - - - 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

-

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:

-

Live CodePen Example

-

Browser Support

-

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

- \ No newline at end of file -- cgit v1.2.3-54-g00ecf