From 3f6a9546ec13063d0d5bdf21d30a93d3e8aa6050 Mon Sep 17 00:00:00 2001 From: Bradley Taunt Date: Tue, 2 Jul 2024 14:22:21 -0400 Subject: Rebuild changes based off latest barf --- build/posts/user-select/index.html | 76 -------------------------------------- 1 file changed, 76 deletions(-) delete mode 100644 build/posts/user-select/index.html (limited to 'build/posts/user-select') diff --git a/build/posts/user-select/index.html b/build/posts/user-select/index.html deleted file mode 100644 index 6c35c91..0000000 --- a/build/posts/user-select/index.html +++ /dev/null @@ -1,76 +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