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?

Solution 1

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.

Solution 2

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.

Solution 3

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.

Solution 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>

Solution 5

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.

View more solutions

Comments

[Andreas Wong]

Even if you can, semantically CSS is for display, not behavior so I would say css is not the proper way to disable stuff (you can hide it using display:none if you want)

[David Bélanger]

@Mark Why ? disabled is an attribute of a textarea, the line above in bArmageddon is correct.

[bArmageddon]

I'm not sure that disabling a textarea can be automatically considered behavior, it is more style and UI that disables the user from inserting an input. What functionality does disabled has other than preventing and input change? That could be considered a UI issue these days...

[AnnanFay]

pointer-events: none; should stop the text area being clicked on in Firefox 3.6+, Safari 3+ and Chrome 5+. You can then apply all the colour effects. You might look at putting javascript into css files if your curios, I think this may be possible with IE's dynamic properties. But all of these are hackish! :)

[BoltClock]

@Annan: You can still tab to it, though.

[AnnanFay]

@BoltClock True. I don't know any way to get around that.

[Blargh]

Excellent idea. Favorited. However you need to set moz-use-focus to ignore of the fields otherwise users can tab into it.

[Viliami]

you can still use tab to select

[Jack Miller]

To disable selecting using tab: Add attribute tabindex="-1" (e.g. using JS). Unfortunately not CSS...