From 64a40466af1722c0a67c5740015a5499b3a9834a Mon Sep 17 00:00:00 2001
From: Rohit Tanwar <31792358+kriadmin@users.noreply.github.com>
Date: Mon, 26 Feb 2018 22:39:58 +0530
Subject: [PATCH] Create disable-selection.

---
 snippets/disable-selection.md | 50 +++++++++++++++++++++++++++++++++++
 1 file changed, 50 insertions(+)
 create mode 100644 snippets/disable-selection.md

diff --git a/snippets/disable-selection.md b/snippets/disable-selection.md
new file mode 100644
index 000000000..d39f99d53
--- /dev/null
+++ b/snippets/disable-selection.md
@@ -0,0 +1,50 @@
+### Disable Selection
+
+Makes the content unselectable.
+
+#### HTML
+
+```html
+<div>
+  <p class="unselectable"> You can't select me! </p>
+  <p> You can select me!! </p>
+</div>
+```
+
+#### CSS
+
+```css
+.unselectable {
+  user-select: none;
+}
+```
+
+#### Demo
+
+<!-- You must create a `snippet-demo` parent block and use it as a namespace with BEM syntax. -->
+
+<div class="snippet-demo">
+  <p class="snippet-demo__disable-selection">You can't select me!</p>
+  <p>You can select me!!</p>
+</div>
+
+<!-- Add your style rules here. -->
+
+<style>
+.snippet-demo__disable-selection{
+  user-select: none;
+}
+</style>
+
+#### Explanation
+`user-select: none` defines that the text cannot be selected. 
+#### Browser support
+
+<!-- Use the checkmark or the warning emoji, see the existing snippets. -->
+
+<span class="snippet__support-note">⚠️ Requires prefixes for full support and is not actually in any specification.</span>
+
+<!-- Whenever possible, link a `caniuse` feature which allows the browser support percentage to be displayed.
+If no link is provided, it defaults to 99+%. -->
+
+* https://caniuse.com/#search=user-select