diff options
author | Bradley Taunt <bt@btxx.org> | 2024-07-01 16:23:43 -0400 |
---|---|---|
committer | Bradley Taunt <bt@btxx.org> | 2024-07-01 16:23:43 -0400 |
commit | 088c87bcb58be576308da503d4f11a68843c5013 (patch) | |
tree | 4299b974a40b22fcc9d1d2df0a67810f1e61d50c /_posts/2019-06-04-user-select.md |
Initial new commit
Diffstat (limited to '_posts/2019-06-04-user-select.md')
-rw-r--r-- | _posts/2019-06-04-user-select.md | 51 |
1 files changed, 51 insertions, 0 deletions
diff --git a/_posts/2019-06-04-user-select.md b/_posts/2019-06-04-user-select.md new file mode 100644 index 0000000..8b332ab --- /dev/null +++ b/_posts/2019-06-04-user-select.md @@ -0,0 +1,51 @@ +--- +layout: post +title: "Using User-Select" +date: 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](https://codepen.io/bradleytaunt/pen/QRooZp/) + +## Browser Support + +The great news is `user-select` is fully supported across all modern browsers (even as far back as IE10!) |