Disabling Textarea from CSS

You can make a textarea appear disabled, but you can't actually disable it.

Using JavaScript, all you're really doing is modifying the same DOM attribute that's set by the HTML disabled attribute, so using HTML and JavaScript you're essentially doing the same thing. CSS, however, is completely out of this picture, as it doesn't do DOM manipulation of any sort — all it controls is the appearance (visual or otherwise) of an element, not its behavior.

In a Project I have a container with a textarea and some buttons inside. To disable the whole thing I append a class to it with the following code:

.disabled {
  opacity: 0.3;
}
.disabled:after {
    width: 100%;
    height: 100%;
    position: absolute; 
}

<div class="disabled">
    <textarea></textarea>
    <!-- textarea, buttons and other input elements -->
</div>

While the opacity is only for the show, the :after element is doing the work. All elements in the container are no longer reacting to click and mouseover (reaching them with the tabulator will still work though). For my needs and in my case this works fine and is an easy css hack.