Text field placeholder does not appear when moving outside the text field

Question

I followed this little tutorial to add animation to the input field placeholder. The animation moves the placeholder from the input field while focusing the input field.

This animation works fine on the input field and the placeholder is visible above the input field, but when I add this animation to the text field, the placeholder disappears after it passes the edge of the text field.

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 the JSFiddle to demonstrate the problem.

Does anyone have an idea how I can also show the placeholder of the text box above it?

Answer 1

As @somethinghere comment mentioned, you will run into accessibility / usability issues when the input fields are not empty, which removes the placeholder. Although somewhat different from your original approach, using a combination of CSS positioning, HTML tags and flexbox can achieve the same effect without losing the indicators of each field when they are filled.

The approach is simple:

• Insert input elements and labels into <div> elements. Shortcuts must appear after to enter for the adjacent sibling + selector to work
• Use flexbox to place a label in front of the entry by changing the direction of the column using flex-direction: column-reverse . The advantage of this approach is that you can change the order of the elements as you like, for example, on mobile screens, etc.
• Use + to move the labels by changing their top property when the companion input / text area is in focus.

Here is an example of evidence:

 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 positioning top , this 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> 

Answer 2

The browser seems to be hiding placeholder text <textarea> . An easy way to get around this behavior is to provide a textarea::-webkit-input-placeholder element textarea::-webkit-input-placeholder a position: absolute; . This, however, has the disadvantage that you cannot correctly position it.

 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> 

Answer 3

In this case, you will have to add a wrapper tag, as well as add a style below:

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

Jsfiddle

Screenshot:

Answer 4

 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 the position as absolute when focus is focused

Answer 5

BTW I create just CSS:

 input.form-control::-webkit-input-placeholder { transition: transform .3s ease-out; transform-origin: 0 0; } input.form-control:focus::-webkit-input-placeholder { transform: translateY(-10px) scale(0.8); transform-origin: 0 0; } 

For exmpl, as here http://www.rusfond-finans.ru/loans/orderzaim.phtml