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?


Show source
| html   | css   | html5   | css3   2017-01-04 14:01 4 Answers

Answers to Placeholder of textarea not visible when moved outside of the textarea ( 4 )

  1. 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>

  2. 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

  3. 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>

  4. 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

Leave a reply to - Placeholder of textarea not visible when moved outside of the textarea

◀ Go back