Post typing effect on placeholder

Question

Guys I’m trying to add a behavior to a placeholder but I’m not getting it.

On the website of ticket with. when the user enters a value in the placeholder forml some and a small label appears above the typed text.

This type of effect is a placeholder behavior via CSS or is a behavior in conjunction with other components?

To implement this, what should I change in CSS?

Answer 1

look, unfortunately there is no pseudo-seletor to the input that signals that it has an empty value or not, so if you hear a pseudo-seletor :empty I could give you a full answer.

But we can use others pseudo-seletores to get an approximate result, in case we have the :valid and :invalid, if you can use the property required or pattern in inputs, however this may prevent the sending of a form if some input is not filled in:

.float-label {
  position: relative;
  height: 37px;
  width: 200px;
}

.float-label label,
.float-label input {
  display: block;
  position: absolute;
  width: 100%;
  box-sizing: border-box;
}

.float-label label {
  transition-duration: 0.2s;
  left: 2px;
  top: 18px;
  color: gainsboro;
}

.float-label input {
  top: 17px;
}

.float-label input:valid + label {
  top: 0px;
  color: black;
}

<form src="#">
  <div class="float-label">    
    <input id="teste" type="text" required />
    <label for="teste">Teste</label>
  </div>
  <input type="submit" value="Simular Envio" />
</form>

A second option is the pseudo-seletor :focus, this will cause the label to go up when the user enters the input, but the label will return as soon as the input loses the focus.

.float-label {
  position: relative;
  height: 37px;
  width: 200px;
}

.float-label label,
.float-label input {
  display: block;
  position: absolute;
  width: 100%;
  box-sizing: border-box;
}

.float-label label {
  transition-duration: 0.2s;
  left: 2px;
  top: 18px;
  color: gainsboro;
}

.float-label input {
  top: 17px;
}

.float-label input:focus + label {
  top: 0px;
  color: black;
}

<form src="#">
  <div class="float-label">    
    <input id="teste" type="text" />
    <label for="teste">Teste</label>
  </div>
  <input type="submit" value="Simular Envio" />
</form>

So the way I see it, there’s only one option left, to use one data-custom that informs that the input is empty, for such you will need a small JS.

var floatLabel = document.querySelectorAll(".float-label");
var onFloatLabelChange = function () {
  if (this.value.length == 0) {
    this.dataset.empty = null;
  } else {
    delete this.dataset.empty;
  }
}

floatLabel = [].slice.apply(floatLabel);
floatLabel.forEach(function (container) {
  var input = container.querySelector("input");
  input.addEventListener("keyup", onFloatLabelChange);
});

.float-label {
  position: relative;
  height: 37px;
  width: 200px;
}

.float-label label,
.float-label input {
  display: block;
  position: absolute;
  width: 100%;
  box-sizing: border-box;
}

.float-label label {
  transition-duration: 0.2s;
  left: 2px;
  top: 0px;    
  color: black;
}

.float-label input {
  top: 17px;
}

.float-label input[data-empty] + label {
  top: 18px;
  color: gainsboro;
}

<form src="#">
  <div class="float-label">    
    <input id="teste" type="text" data-empty />
    <label for="teste">Teste</label>
  </div>
  <input type="submit" value="Simular Envio" />
</form>