LabEx
Log InJoin Free

Disable Content Selection with CSS

Beginner

This tutorial is from open-source community. Access the source code

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.

This is a Guided Lab, which provides step-by-step instructions to help you learn and practice. Follow the instructions carefully to complete each step and gain hands-on experience. Historical data shows that this is a beginner level lab with a 88% completion rate. It has received a 100% positive review rate from learners.

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.