CSS Property Value How to - user-select: none;








Question

We would like to know how to user-select: none;.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
.no-select {<!-- www.  j  ava 2  s . co m-->
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: -moz-none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

.heading {
  color: gray;
  font-style: italic;
}

p {
  text-indent: 20px;
}
</style>
</head>
<body>
  <div>
    <span class="no-select heading">Heading 1 - can't select it</span>
    <p>This text you can select & copy.</p>
    <span class="no-select heading">Heading 2 - can't select it</span>
    <p>This text you can select & copy.</p>
  </div>
</body>
</html>

The code above is rendered as follows: