Disable Text Selection In WebPage Using CSS.

-
To Disable Text Selection it takes only Two steps:-
  1. Make a HTML file and define markup for webpage
  2. Make a CSS file and define styling to disable the text

Step 1.Make a HTML file and define markup for web page
We make a HTML file and save it with a name Index.html

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="disable.css">
</head>
<body>
  
<h1>Disable Text Selection In Website Using CSS</h1>
<p class="select">Select The Text In This Paragraph This Is Selectable Like Any Other Text</p>
<p class="no_select">Try To Select This Text You Are Not Able To Select This Text In Modern Browsers</p>

</body>
</html>

Step 2.Make a CSS file and define styling to disable the text

We make a CSS file and save it with name disable.css


body
{
 background-color:#eae2ec;
 font-family:helvetica;
 text-align:center;
 margin:0px auto;
 padding:0px;
}
h1
{
 margin-top:100px;
 color:#424242;
 font-size:40px;
}
h1 p
{
 margin:0px;
 font-size:18px;
 color:black;
 text-decoration:underline;
}
.select
{
 font-size:30px;
 font-weight:bold;
 color:#4000FF;
}
.no_select
{
 font-size:30px;
 font-weight:bold;
 color:#c000ff;
 -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}


In this step we use the user-select property to disable the text selection and also we use cross-browser prefix so that this should work in most of the browser and also with some old browsers.You may also like Block Inspect Element using JavaScript.



Comments

Post a Comment

Popular posts from this blog

How To Migrate MVC 3 Application To MVC 5

-
Image
Introduction In this article we discuss about how to migrate an MVC 3 application to MVC 5. Step 1:  Open your MVC 3 application in Visual Studio and change the .net framework to 4.7.2 as MVC 5 runs on this framework. MVC 3 Project Property Project → Properties → Application → Target Framework → 4.7.2 For Set MVC 5  Note:  targetFramework in Web.Config will be changing to 4.7.2 Step 2:  Install Asp.Net MVC 5 version through Package Manager Console. Run this Command: Install-Package Microsoft.AspNet.Mvc -Version 5.7.2 Nuget Package Manage → Package Manager Console and run above command. Step 3:  Go to Web.Config(root level) and change, <add key="webpages:Version" value="1.0.0.0" /> to <add key="webpages:Version" value="3.0.0.0" /> webpages:Version Step 4:  Check System.Web.Razor, System.Web.Helpers, System.WebPages.Razor versions. These all should be having versions 3.0.0.0. If th...
Read more

Populate a drop-down in Vue.js and Asp.net Core from an ajax call

-
Image
  If you want to call a function on page load and Bind Drop down  List in Vue js then in this example i will show you how to trigger function on page load in vue js. we will run function on page load vue application. we mostly require to call method on page load in our application. so you want to call function in Vue.js app then you can do it using created option in vue js. So i will give full example so you can check it out. Index . cshtml < div id ="apps">     < div class ="form-group">         < label class ="control-label"> State </ label >         < select v-model ="state" class ="form-control" v-on:change ="getcity($event)">             < option v-for ="state in States" : value ="state.stateId"> {{ state.stateName }} </ option >       ...
Read more

Building a CRUD Application with Ag-Grid

-
Image
To Create Crud operation In Ag-Grid using C# MVC here Is a Download Link  Click here.. Bundle Config bundles.Add( new ScriptBundle( "~/bundles/jquery" ).Include(                          "~/Scripts/jquery-1.12.4.js" ,                         "~/Scripts/jquery-ui-1.12.1.js" ,                         "~/Scripts/bootstrap.js" ,                           "~/Scripts/jquery.validate*" ,                     ...
Read more