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.

0 0 vote
Article Rating
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x