Placeholder of textarea not visible when moved outside of the textarea

Question

I have been following this small tutorial to add an animation to the placeholder of an input-field. The animation moves the placeholder out of the input-field when the input-field is focused.

This animation works perfectly on an input-field, and the placeholder is visible above the input-field, but when i add this animation to a textarea, the placeholder disappears once it passes the edge of the textarea.

 input,
textarea {
  margin: 30px 0 0 0;
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
 -webkit-transition: all 0.3s ease-in-out;
 transition: all 0.3s ease-in-out;
}

input:focus::-webkit-input-placeholder,
textarea:focus::-webkit-input-placeholder{ 
 -webkit-transform: translateY(-20px);
 transform: translateY(-20px);
 visibility: visible !important;
}

<input type="text" id="edit-field-name-0-value" value="" size="60" maxlength="255" placeholder="Name *" required="required">
<textarea rows="8" cols="60" placeholder="Message *" required="required"></textarea>

Here's an JSFiddle to demonstrate the problem.

Does anyone have an idea how i can also show the placeholder of the textarea above it?

Answer 1

As mentioned by @somethinghere's comment, you will run into an accessibility/usability issue when the input fields are non-empty, which removes the placeholder. Although somewhat different than your original approach, using a combination of CSS positioning, HTML labels and flexbox allows you to achieve the same effect, without losing indicators of each field when they are filled.

The approach is simple:

• Wrap input and label elements in <div> elements. Labels have to appear after the inputs for the adjacent sibling selector + to work
• Use flexbox to position the label before the input, by reversing the column direction, using flex-direction: column-reverse. The advantage of this approach is that you can reorder the elements as you like, such as on mobile screens and etc.
• Use + to move the labels by changing their top property when the accompanying input/textarea is in focus

Here is a proof-of-concept example:

div {
  display: flex;
  flex-direction: column-reverse;
  }
input,
textarea {
  display: block;
  font-family: 'Arial';
  font-size: 1em;
}
label {
  display: block;
  font-family: 'Arial';
  font-size: 1em;
  position: relative;
  top: 1.5em;
  left: .35em;
  transition: all .5s ease-in-out;
}
input:focus + label,
textarea:focus + label {
  top: 0;
  }

<div>
  <input type="text" id="edit-field-name-0-value" value="" size="60" maxlength="255" placeholder="Name *" required="required">
  <label for="edit-field-name-0-value">Name *</label>
</div>
<div>
  <textarea rows="8" cols="60" placeholder="Message *" required="required" id="textarea0"></textarea>
  <label for="textarea0">Message *</label>
</div>

---

If you want to use CSS transforms instead of top positioning, that is also possible:

div {
  display: flex;
  flex-direction: column-reverse;
  }
input,
textarea {
  display: block;
  font-family: 'Arial';
  font-size: 1em;
}
label {
  display: block;
  font-family: 'Arial';
  font-size: 1em;
  position: relative;
  transform: translateY(1.5em);
  left: .35em;
  transition: all .5s ease-in-out;
}
input:focus + label,
textarea:focus + label {
  transform: translateY(0);
  }

<div>
  <input type="text" id="edit-field-name-0-value" value="" size="60" maxlength="255" placeholder="Name *" required="required">
  <label for="edit-field-name-0-value">Name *</label>
</div>
<div>
  <textarea rows="8" cols="60" placeholder="Message *" required="required" id="textarea0"></textarea>
  <label for="textarea0">Message *</label>
</div>