Welcome to today’s tutorial. In today’s tutorial, we will learn how to disable text selection in a webpage. For this, we are going to use just a few lines of CSS. No Javascript is needed. This is going to be a quick tutorial. So let us get started.
Video Tutorial:
If you are interested in coding along with me, check out the video tutorial below. I post a new tutorial every alternate day on my youtube channel, so make sure to subscribe.
Project Folder Structure:
Before we move to the actual coding, let us take a quick look at the project folder structure. The project folder structure consists of 2 files. The first is the HTML document – index.html, and the second is stylesheet – style.css.
HTML:
The HTML consists of just some h1 heading and some ‘lorem ipsum’ demo text so you can check if the trick really works. You can use any element or any text of your choice in the HTML.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Disable Text Selection</title>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>Disable Text Selection</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem
corrupti blanditiis voluptatem, dolorum unde quis rem, commodi deleniti
doloremque suscipit voluptatibus rerum eveniet. Quas, rem minima? Expedita
impedit quae explicabo excepturi autem corrupti voluptas corporis fuga
similique quo repellendus veritatis qui, possimus esse molestiae alias
dolorum labore cumque repellat modi quisquam totam nisi. Autem aliquam
tenetur delectus, saepe quod accusantium maxime deserunt a perspiciatis
aspernatur sequi mollitia earum, quos dolores, itaque obcaecati aut
consequatur iste optio? Quia voluptate inventore fugiat earum ad nemo ex
facere quae quo! Dolore, ab, atque commodi laudantium ut dolor, incidunt
illo illum dolorem fugiat amet!
</p>
</body>
</html>
Other Tutorials You Might Like:
- Countdown To A Certain Date With Javascript
- Dictionary App | HTML, CSS And Javascript
- Javascript Tip Calculator
- Random Password Generator | Javascript
CSS:
For the CSS, we do the usual CSS reset that removes unwanted margins from all the elements. We also set some basic styling to the h1 tag. Now we need to disable text selection for the p tag. So we set the user-select to none. To add support for other browsers we add some vendor prefixes.
If you need further assistance in browser support for ‘user-select’ you can check out Can I Use. And that’s it. You have successfully disabled text selection.
* {
padding: 10px;
margin: 0;
font-family: "Poppins", sans-serif;
line-height: 2;
}
h1 {
color: #6b72e7;
}
p {
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
If you have issues while creating this, you can download the code below by clicking on the ‘download code’ button. Also if you have any suggestions or feedbacks do leave them below in the comments.
