HTML/CSS – Make DIV Element readonly With CSS
This post shows you how to make an HTML <div> element as readonly with CSS approach.
1. CSS user-select property
In order to do this in CSS, we will need to use user-select: none that prevents text selection of a <div> element, the CSS code looks in this way.
div {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
2. Example
Below is the code example that demonstrates how to use user-select property. Click on the “Run Example” button to see how it works.
example.htmlRun Example
<!DOCTYPE html>
<html>
<head>
<title>Make DIV Element readonly with CSS</title>
<style type="text/css">
div.message {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
</style>
</head>
<body>
<div class="message">
<p>This is an example that demonstrates how to make div element to be readyonly with CSS aprroach</p>
</div>
</body>
</html>
Once you set user-select: none to <div> element, you will not select the text of this div and it will not be highlighted if you double-click on it.