<div class="no-copy">
<p>You can't copy me.</p>
</div>
<div class="no-copy">
.
<p>But you can accidently copy me (in Safari/WebKit only, not Blink or Gecko) by selecting the periods around me.</p>
.
</div>
<div class="all-copy">
<p>One click selects all this.</p>
</div>
div {
padding: 20px;
margin: 20px;
background: #eee;
}
.no-copy p {
-webkit-user-select: none; /* Chrome all / Safari all */
-moz-user-select: none; /* Firefox all */
-ms-user-select: none; /* IE 10+ */
user-select: none; /* Likely future */
}
.all-copy p {
-webkit-user-select: all; /* Chrome all / Safari all */
-moz-user-select: all; /* Firefox all */
-ms-user-select: all; /* IE 10+ */
user-select: all; /* Likely future */
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.