HomeCSSDisable Text Selection Using Just CSS

Disable Text Selection Using Just CSS

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:

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.

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

sixteen + 6 =

Most Popular