From 6b742c459266b18e2b375b35205ce8a6c02f0452 Mon Sep 17 00:00:00 2001 From: Bradley Taunt Date: Thu, 6 Jun 2024 08:05:12 -0400 Subject: Initial commit --- build/user-select/index.html | 72 ++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 72 insertions(+) create mode 100644 build/user-select/index.html (limited to 'build/user-select/index.html') diff --git a/build/user-select/index.html b/build/user-select/index.html new file mode 100644 index 0000000..71f065e --- /dev/null +++ b/build/user-select/index.html @@ -0,0 +1,72 @@ + + + + + + + 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