diff options
author | Bradley Taunt <bt@btxx.org> | 2024-07-02 14:28:49 -0400 |
---|---|---|
committer | Bradley Taunt <bt@btxx.org> | 2024-07-02 14:28:49 -0400 |
commit | dc6db80fa72286704849ef61ee0e5ccb5841cb09 (patch) | |
tree | 9235d796229d49211c27a07b9d18585d503baa94 /_posts/2019-06-04-user-select.md | |
parent | 088c87bcb58be576308da503d4f11a68843c5013 (diff) |
Conversion to barf for testing purposes
Diffstat (limited to '_posts/2019-06-04-user-select.md')
-rw-r--r-- | _posts/2019-06-04-user-select.md | 51 |
1 files changed, 0 insertions, 51 deletions
diff --git a/_posts/2019-06-04-user-select.md b/_posts/2019-06-04-user-select.md deleted file mode 100644 index 8b332ab..0000000 --- a/_posts/2019-06-04-user-select.md +++ /dev/null @@ -1,51 +0,0 @@ ---- -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!) |