Post-typing effect on placeholder

Question

Post-typing effect on placeholder

Navigation

#1 by (4 votes)

4

Personal I'm trying to add a behavior in a placeholder but I'm not getting it.

On the ingresso.com site when the user types a value in the forml placeholder and a small label appears above the typed text.

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

To implement this, what should I change in CSS?

html5 css

asked by anonymous 15.08.2015 / 18:53

1 answer

How do I add or subtract a digit in the TextBox with a button? How to implement spinner loanding in AngularJS?

score 4 · Answer 1

Unfortunately, there is no pseudo-seletor for input that signals that it has an empty value or not, so if you hear a pseudo-seletor :empty I could give you a complete answer.

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

.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 pseudo-seletor :focus , this will cause the label to go up when the user enters input , but the label will return as soon as the input loses 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, in my view, there is only one option left, using a data-custom to inform you that the input is empty, so 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>