How To Prevent Copy Content Using CSS

In this article, we will learn how to prevent the user from copying content using CSS.

If in an HTML page, the user should not be allowed to copy a text. You can use CSS for this.

<html>
<head>
    <style>
        .noSelect {
            -webkit-touch-callout: none; /* iOS Safari */            -webkit-user-select: none; /* Safari */            -khtml-user-select: none; /* Konqueror HTML */            -moz-user-select: none; /* Old versions of Firefox */            -ms-user-select: none; /* Internet Explorer/Edge */            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Opera and Firefox */        }
    </style>
</head>
<body>
    <h1 class="noSelect">TheCodeHubs</h1>
    <p class="noSelect">Enter Any Value: </p>
    <input class="noSelect" />
</body>
</html>

In the above example, we applied noSelect class on separate elements. We can also apply it on <body> element as shown below.

<html>
<head>
    <style>
        .noSelect {
            -webkit-touch-callout: none; /* iOS Safari */            -webkit-user-select: none; /* Safari */            -khtml-user-select: none; /* Konqueror HTML */            -moz-user-select: none; /* Old versions of Firefox */            -ms-user-select: none; /* Internet Explorer/Edge */            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Opera and Firefox */        }
    </style>
</head>
<body class="noSelect">
    <h1>TheCodeHubs</h1>
    <p>Enter Any Value: </p>
    <input />
</body>
</html>

Here, noSelect class would not applied on <input> element. Use oncopy attribute to prevent the user to copy a text from <input> element.

Please check How To Prevent Copy Content Using JavaScript, to get a brief description of the oncopy attribute.

That’s it.

Output:

Also, check Disable Back Button In Browser Using JavaScript

Yasin Panwala

Yasin Panwala is a Web Developer and Author at TheCodeHubs. He has experience in Web Developing and Designing and also in Writing. He has got his skills in working on technologies like .NET Core, ADO.NET, AJAX, Angular, AngularJS, ASP.NET, ASP.NET MVC, Bootstrap, C#, CSS, Entity Framework, Express.js, GraphQL, HTML, JavaScript, JQuery, JSON, LINQ, Microsoft Office, MongoDB, MySQL, Node.js, PostgreSQL, SQL, SQL Server, TypeORM, TypeScript, Visual Basic .NET, Web API. He also got his skills in working with different integration and some known versioning tools. He is always ready to learn new things and he always tries his best on tasks that are assigned to him and gives the best possible outputs.