diff options
author | Bradley Taunt <brad@bt.ht> | 2023-11-27 12:25:51 -0500 |
---|---|---|
committer | Bradley Taunt <brad@bt.ht> | 2023-11-27 12:25:51 -0500 |
commit | 14d227d46a2177a8928333894252d6299f531097 (patch) | |
tree | d41d48383d012f53823c9816a820e4e88c572c41 /posts/user-select.md | |
parent | f6eed1a8c2f4fbf91fac9edd11e50f5c0ec939a2 (diff) |
Trying to render posts all at once
Diffstat (limited to 'posts/user-select.md')
-rw-r--r-- | posts/user-select.md | 48 |
1 files changed, 48 insertions, 0 deletions
diff --git a/posts/user-select.md b/posts/user-select.md new file mode 100644 index 0000000..7564ea7 --- /dev/null +++ b/posts/user-select.md @@ -0,0 +1,48 @@ +# 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](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!) |