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>
    <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;
    <div class="message">
        <p>This is an example that demonstrates how to make div element to be readyonly with CSS aprroach</p>

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.

Inline Feedbacks
View all comments
Would love your thoughts, please comment.x