title: apply styles to empty input/textarea only
body: <p>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 (<code>:focus</code>), but stays expanded when the user entered text, but re-collapse when the box is empty.</p>
  
  <p>I have already tried <code>:empty</code>, but that doesn't work for inputs/textareas (only DOM elements).</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;textarea type="text" id="comments" placeholder="Place a comment"&gt;&lt;/textarea&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Is there any way to make the input stay big when the user entered something in it?</p>