Disabling Textarea from CSS

Question

In order to disable a textarea (or any other input element), you can:

• In HTML, you can write: <textarea id='mytextarea' disabled></textarea>

• From jQuery, you can: $("#mytextarea").attr("disabled","disabled");

• CSS? Is it possible to disable the textarea with CSS?

Answer 1

No, it cannot be done in CSS. But, you can style the input as "disabled" in CSS and use the property maxlength="0" in the HTML code so people won't be able to write in it. Also, be sure to change the pointer style as the right one so people won't see the pointer that tell them to write in the box.

Answer 2

CSS deals with styles. Disabling an element is functional.

Of course, CSS is becoming more functional with things like transitions and that's more of a grey area. But the purpose of CSS is to keep it as styles and not to control element functional control.

No, css cannot disable elements.

You can "fake" a disabled control styling it to visually look disabled.

Answer 3

Not possible in pure CSS unfortunately... you'd have to use Javascript.

Answer 4

 <textarea placeholder="This is a textarea, and it is not clickable" style="pointer-events: none"></textarea>

You can make elements completely unclickable with css: point-events: none;

textarea {
  pointer-events: none;
  border: 1px solid #eee;
  padding: 20px;
}

<textarea placeholder="This is a textarea, and it is not clickable"></textarea>

Answer 5

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.

Answer 6

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.