readonly div in CSS or JavaScript

I am afraid, you can't control elements behavior with CSS.

CSS stands for Cascading Style Sheets - it's only for styling elements.

But you can use JavaScript.

Untested jQuery example above:

$('#myDiv').children().attr('readonly', true);

You could use pointer-events: none; to disable mouse DOM interaction (like click, hover, etc) on certain element. Example:

div {
    pointer-events: none;
}

<div>
    <input type="text" value="value" />
    <br />
    <textarea>value</textarea>
</div>

However, even though pointer-events: none; is there, it's still possible to make the cursor to be focus on the element (or it's children). Meaning if we move the cursor focus on the <input /> tag, then it's possible to edit the value.

Example: try to click the <input /> tag, then press tab in keyboard, the cursor focus will be on input, making it editable.

To make <input /> tag completely un-editable, put readonly attribute on the tag. Below is simple example to do it by using jQuery .prop(). You can also put the attribute directly on the tag, depending on the needs.

$("input, textarea").prop("readonly", true);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <input type="text" value="value" />
  <br />
  <textarea>value</textarea>
</div>

You can't do this with CSS unfortunately, you're after the readonly attribute on HTML elements. You can pretty easily accomplish what you want using JavaScript, here's an example with jQuery.

jsFiddle

HTML

<div class="readonly">
    <input type="text" />
    <div><input type="checkbox" /> Blah</div>
    <textarea>abc</textarea>
</div>

JavaScript

$(document).ready(function() {
    $('.readonly').find('input, textarea, select').attr('readonly', 'readonly');
});