How to Move Placeholder to Top on Focus and While Typing

How to move placeholder to top on focus AND while typing?

You could do it like this

HTML:

<div>
  <input type="text" class="inputText" />
  <span class="floating-label">Your email address</span>
</div>

CSS:

input:focus ~ .floating-label,
input:not(:focus):valid ~ .floating-label{
  top: 8px;
  bottom: 10px;
  left: 20px;
  font-size: 11px;
  opacity: 1;
}

.inputText {
  font-size: 14px;
  width: 200px;
  height: 35px;
}

.floating-label {
  position: absolute;
  pointer-events: none;
  left: 20px;
  top: 18px;
  transition: 0.2s ease all;
}

Working JSFiddle here https://jsfiddle.net/273ntk5s/2/

Move placeholder above the input on focus

You can use the CSS pseudo-selector :placeholder-shown in this case to detect when to move a fake placeholder out of the way. See example below:

label {

  margin:20px 0;

  position:relative;

  display:inline-block;

}

  

span {

  padding:10px;

  pointer-events: none;

  position:absolute;

  left:0;

  top:0;

  transition: 0.2s;

  transition-timing-function: ease;

  transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);

  opacity:0.5;

}

input {

  padding:10px;

}

input:focus + span, input:not(:placeholder-shown) + span {

  opacity:1;

  transform: scale(0.75) translateY(-100%) translateX(-30px);

}

/* For IE Browsers*/

input:focus + span, input:not(:-ms-input-placeholder) + span {

  opacity:1;

  transform: scale(0.75) translateY(-100%) translateX(-30px);

}

<label>

  <input placeholder=" ">

  <span>Placeholder Text</span>

</label>

Move label in placeholder CSS

i hope this is what you need. but there is a problem when you unfocused input.

i just make little changes in HTML.

.field{

  position: relative;

}

label {

  position: absolute;

  pointer-events: none;

  left: 10px;

  top: 2px;

  transition: 0.2s ease all;

  font-size: 15px;

}

input:focus ~ label{

  top:-10px;

  font-size:12px;

}

<div class="field">

 <input type="text" class="input-text">

  <label>First Name</label>

</div>

How to move the PLACEHOLDER text to the top

You may use a textarea instead of an input, try that! and if you want to make it bigger just add cols="x" and rows="x" atributes on the textarea tag.

Is it possible to have placeholder and floating input text at same time?

Vanilla JS:

input = document.getElementById("input_name");

inputP = input.getAttribute("placeholder");

input.placeholder = "";

input.onfocus = function () {

 this.placeholder = inputP;

}

input.onblur = function () {

 this.placeholder = "";

}

input:focus ~ .floating-label {

  top: 8px;

  bottom: 10px;

  left: 20px;

  font-size: 11px;

  opacity: 1;

}

.inputText {

  font-size: 14px;

  width: 200px;

  height: 35px;

}

.floating-label {

  position: absolute;

  pointer-events: none;

  left: 20px;

  top: 18px;

  transition: 0.2s ease all;

}

<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label streetupdate" >

        <input class="mdl-textfield__input inputText" placeholder="123 Address" type="text" id="input_name"/>

        <label class="floating-label mdl-textfield__label" for="input_name">Street Address</label>

</div> 

HTML - Keep placeholder when user types

Hard to think of a good usecase for such a behaviour, as it is blocking some of the users input.

An easy way would be to use input::after but this is not supported by any browser right now (thanks @JukkaK.Korpela).

But you can use a wrapper element and a data attribute, as follows:

<div class="placeholder" data-placeholder="my placeholder">
    <input value="My text" />  
</div>

With this css:

.placeholder
{
    position: relative;
}

.placeholder::after
{
    position: absolute;
    left: 5px;
    top: 3px;
    content: attr(data-placeholder);
    pointer-events: none;
    opacity: 0.6;
}

Resulting in:

Click here for jsFiddle demo.

---

Since you will have to do a lot of tweaking to make this look good, you may also consider using the wrapping <div> element as a input "look alike":

<div class="editable" data-placeholder="my placeholder">
    <input type="text" value="my Text" />
</div>

CSS:

.editable
{
    position: relative;
    border: 1px solid gray;
    padding: 3px;
    background-color: white;
    box-shadow: rgba(0,0,0,0.4) 2px 2px 2px inset;
}

.editable > input
{
    position: relative;
    z-index: 1;
    border: none;
    background-color: transparent;
    box-shadow: none;
    width: 100%;
}

.editable::after
{
    position: absolute;
    left: 4px;
    top: 5px;
    content: attr(data-placeholder);
    pointer-events: none;
    opacity: 0.5;
    z-index: 1;
}

Click here for the Demo 3. (with mocked <input />)

Click here for the Demo 2. (with contenteditable)

---

Related Topics