Question: Placeholder of textarea not visible when moved outside of the textarea

Question

Placeholder of textarea not visible when moved outside of the textarea

Answers 4
Added at 2017-01-04 14:01
Tags
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?

Answers to

Placeholder of textarea not visible when moved outside of the textarea

nr: #1 dodano: 2017-01-04 15:01

It seems like the browser hides the placeholder text of a <textarea>. An easy way to circumvent this behavior is to give the textarea::-webkit-input-placeholder element a position: absolute;. This, however, has the drawback, that you cannot position it correctly.

div {
  position: relative;
  margin: 30px;
}

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

textarea::-webkit-input-placeholder {
  position: absolute;
}

input:focus::-webkit-input-placeholder,
textarea:focus::-webkit-input-placeholder{ 
 -webkit-transform: translateY(-20px);
 transform: translateY(-20px);
}
<div>
  <input type="text" id="edit-field-name-0-value" value="" size="60" maxlength="255" placeholder="Name *" required="required">
</div>
<div>
  <textarea rows="8" cols="60" placeholder="Message *" required="required"></textarea>
</div>

nr: #2 dodano: 2017-01-04 15:01

Here's a workaround, you'll have to add a wrapper tag and also add the below style:

.textarea-wrapper {
  position: relative;
}
textarea::-webkit-input-placeholder {
 position: absolute;
 top: 0;
 left: 0;
}

JSFiddle

Screenshot:

Output

nr: #3 dodano: 2017-01-04 15:01

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>

nr: #4 dodano: 2017-01-04 15:01
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;
 position: absolute;
}

You just need to add position as absolute when the placeholder is focussed

Source Show
◀ Wstecz