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.