apply styles to empty input/textarea only

Question

I was wondering if it is possible to apply styles to an empty textarea only. As a minimal example, I'd like a comments box that expands when the user clicks on it (:focus), but stays expanded when the user entered text, but re-collapse when the box is empty.

I have already tried :empty, but that doesn't work for inputs/textareas (only DOM elements).

#comments {
  width: 150px;
  height: 30px;
  font-family: sans-serif;
  border-radius: 5px;
  outline:none;
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  transition: all 1s;
}

#comments:not(:empty),
#comments:focus {
  width: 250px;
  height:100px;
  border-radius: 10px;
}

<textarea type="text" id="comments" placeholder="Place a comment"></textarea>

Is there any way to make the input stay big when the user entered something in it?

I'am affraid you will have to use javascript for this: http://stackoverflow.com/a/3617050/3244925 - also: http://stackoverflow.com/a/8639309/3244925 — Nico O, Dec 21 '14 at 14:40
@web-tiki preferably not. I don't have to support older browsers though. — Joeytje50, Dec 21 '14 at 14:41
You can make the textarea as `required` and then use `invalid`/`valid` options but that has other unwanted effects. Else, JS is the best option. [Here](http://jsfiddle.net/s3bmy5fr/) is a sample fiddle for the option using valid/invalid. But please don't use it :) — Harry, Dec 21 '14 at 14:42
@Harry Could you post that as an answer, and then elaborate on the other unwanted effects? I think that might be the best solution. — Joeytje50, Dec 21 '14 at 14:44
This won't help you, as this also requires JS to retrieve the actual value entered, but your CSS works for elment with the `contentEditable="true"` attribute applied: http://jsfiddle.net/2qsodqws/ — Nico O, Dec 21 '14 at 14:45
@Joeytje50: Just came across [this](http://stackoverflow.com/questions/7072576/can-i-select-empty-textareas-with-css) mate. Seems like a near enough duplicate and so not adding an answer. The side effect is that you may probably have to reset the `required` setting on submit. Else, it may cause errors. — Harry, Dec 21 '14 at 14:45
[This](http://stackoverflow.com/questions/16002469/is-there-a-way-to-target-all-textareas-with-a-value-using-css-only) is another similar question. — Harry, Dec 21 '14 at 14:47
Cannot be done without scripting at the current time, sorry for the before post. — Mouser, Dec 23 '14 at 22:56

score 0 · Accepted Answer · answered Dec 26 '14 at 17:09

From what I can see, :empty is still a working draft and may not be supported by the specific browser you are using.

A quick JavaScript solution would be to add/remove an HTML class based upon whether or not the textarea has a value.

.empty{/*styles go here*/}

And your JavaScript:

textareaElement.addEventListener('input',function(){
    if(this.value && this.classList.contains("empty")) this.classList.remove("empty");
    else this.classList.add("empty");
},false);

More info about Element.classList can be found on MDN.

apply styles to empty input/textarea only

1 Answers1