Post History

The basic ideia is to create an `input` with a "fake" placeholder, and a `span` that will serve as the actual placeholder text. Then you group both inside a `label`, like this:

```html
<label>
  <input type="password" placeholder=" ">
  <span>Enter your password</span>
</label>
```

Note the `input`'s "fake" placeholder (just a single space). We'll use it just to know when the placeholder is being displayed or not (such as when you click in the `input` field - in that case, the placeholder disappears so you can type). To detect when the placeholder is being displayed, we're gonna use the [`placeholder-shown` pseudo-class](https://developer.mozilla.org/en-US/docs/Web/CSS/:placeholder-shown).

The actual placeholder text is whatever it is inside the `span`, so we just need some CSS adjustments to place it where we need:

```css
label {
  position: relative;
  display: inline-block;
}
  
span {
  padding: 10px;
  pointer-events: none;
  position: absolute;
  left: 0;
  top: 0;
  transition: 0.4s;
  opacity: 0.5;
}

input {
  padding: 10px;
}

/* When input is focused, or the placeholder is not being displayed, change the border to blue */
input:focus, input:not(:placeholder-shown) {
  outline: none;
  border-color: blue; 
}

/* When input is focused, or the placeholder is not being displayed, change the placeholder size, position and color */
input:focus + span, input:not(:placeholder-shown) + span {
  opacity: 1;
  background-color: white;
  color: blue;
  transform: scale(0.75) translateY(-65%) translateX(-20px);
}
```

We use `input:focus` and `input:not(:placeholder-shown)` to know when the placeholder must be moved to the top (the former is for when we click on it, the latter is for any situation when the placeholder is not being shown, such as when there's something already typed in the `input` field, regardless of its focus).

In those cases, the `input` changes its border color, and the placeholder (the `span` content) is moved to the top (`translateY` and `translateX`), with a smaller size (`scale(0.75)`), and I also change its color - and the background color, so the text is shown over the `input` border.

And you can also play with the `transition` values to control how the placeholder is animated: the `0.4s` is the time it takes to move from/to the top (0.4 seconds), and there are [lots of other options](https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function) available, to achieve different effects.