Disable Content Selection with CSS

Introduction

In this lab, we will dive into CSS programming and explore the user-select property. This lab aims to teach you how to disable selection of certain elements in your web page, which can be useful in preventing users from copying content. By the end of this lab, you will have a better understanding of how to use the user-select property and its impact on web design.

Skills Graph

Disable Selection

index.html and style.css have already been provided in the VM.

To make an element's content unselectable, add the CSS property user-select: none to the selector. However, this method is not entirely secure to prevent users from copying content.

Example:

<p>You can select me.</p>
<p class="unselectable">You can't select me!</p>

.unselectable {
  user-select: none;
}

Please click on 'Go Live' in the bottom right corner to run the web service on port 8080. Then, you can refresh the Web 8080 Tab to preview the web page.

Summary

Congratulations! You have completed the Disable Selection lab. You can practice more labs in LabEx to improve your skills.