Animated Placeholder

Question

Animated Placeholder

Navigation

#1 by (3 votes)
#2 by (0 votes)

1

I found this response link but I can not keep the placeholder as a title, as soon as I type something it disappears, in this way box goes unidentified

.inputAnimado{
  margin: 10px 25px;
  width: 200px;
  display: block;
  border: none;
  padding: 10px 0;
  border-bottom: solid 1px #1abc9c;
  -webkit-transition: all 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);
  transition: all 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);
  background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 96%, #1abc9c 4%);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 96%, #1abc9c 4%);
  background-position: -200px 0;
  background-size: 200px 100%;
  background-repeat: no-repeat;
  color: #0e6252;
}

.inputAnimado:focus, .inputAnimado:valid {
 box-shadow: none;
 outline: none;
 background-position: 0 0;
}

.inputAnimado::-webkit-input-placeholder {
 font-family: 'roboto', sans-serif;
 -webkit-transition: all 0.3s ease-in-out;
 transition: all 0.3s ease-in-out;
}

.inputAnimado:focus::-webkit-input-placeholder, .inputAnimado:valid::-webkit-input-placeholder {
 color: #1abc9c;
 font-size: 11px;
 -webkit-transform: translateY(-20px);
 transform: translateY(-20px);
 visibility: visible !important;
}

<input type="text" placeholder="Não quero sumir ao digitar" class="inputAnimado" required>

html css placeholder

asked by anonymous 08.05.2017 / 04:31

2 answers

Number of rows in DataGridView Case no order by

score 3 · Answer 1

I believe that by using placeholder there is no way to do it because of its default operation, which is to disappear when the value length of input is greater than zero. One way not so simple, but nothing complex, is to position label relative to input on it, simulating placeholder and when input receives focus move label up, in position title.

See an example:

$(() => {

  $("input").on("focus", function(event) {
    const div = $(this).parent(".input-field");
    const label = div.children("label");
    
    label.css("top", "-10px");
  });
  
  $("input").on("blur", function(event) {
    const div = $(this).parent(".input-field");
    const label = div.children("label");
    
    if ($(this).val().length == 0) {
      label.css("top", "12px");
    }
  });

});

.input-field {
  position: relative;
  margin-bottom: 40px;
}

.input-field input {
  margin: 10px 0;
  width: 200px;
  display: block;
  border: none;
  padding: 10px 0;
  border-bottom: solid 1px #1abc9c;
  -webkit-transition: all 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);
  transition: all 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);
  background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 96%, #1abc9c 4%);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 96%, #1abc9c 4%);
  background-position: -200px 0;
  background-size: 200px 100%;
  background-repeat: no-repeat;
  color: #0e6252;
}

.input-field input:focus {
  box-shadow: none;
  outline: none;
  background-position: 0 0;
}

.input-field label {
  color: #9e9e9e;
  font-size: 12px;
  position: absolute;
  top: 12px;
  transition: .2s ease-out;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="input-field">
  <input id="name" type="text" class="validate">
  <label for="name">Nome</label>
</div>

<div class="input-field">
  <input id="lastname" type="text" class="validate">
  <label for="lastname">Sobrenome</label>
</div>

<div class="input-field">
  <input id="email" type="text" class="validate">
  <label for="email">E-mail</label>
</div>

score 0 · Answer 2

Your CSS code is correct, what is missing is the required tag in the HTML of your input, according to the example to happen the animation is needed. Your code will look like this:

<input class="inputAnimado" type="text" placeholder="Vou sumir ao digitar" required>

Now if you want it to work in all cases, regardless of required or not, you should change your CSS. Remove .inputAnimado:valid::-webkit-input-placeholder :

.inputAnimado:focus::-webkit-input-placeholder {
    color: #1abc9c;
    font-size: 11px;
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
    visibility: visible !important;
 }

What happens is that :valid is used to validate according to the type HTML tag, as without the required your text field is always valid it will not come in and out of the animation, it will be always excited. Removing :valid the animation will only depend on :focus , that is, it will only be activated when there is interaction with that field.