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/user-select/index.html | 76 ++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 76 insertions(+) create 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 new file mode 100644 index 0000000..6c35c91 --- /dev/null +++ b/build/user-select/index.html @@ -0,0 +1,76 @@ + + + + + + + + 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