5

¿Cómo se llama este efecto o propiedad? ¿Es de Bootstrap?:

introducir la descripción de la imagen aquí

Como ven, el placeHolder se alinea con el margen del TextBox al hacer click dentro de el para escribir.

1 respuesta 1

14

Son conocidos como 'Floating labels/placeholders'. Y están basados en Material Design. Es un tipo de diseño con ciertos estándares creado por Google.

Hay varias maneras de poder realizarlo y eso varia de desarrollador a desarrollador, te dejo una manera. Solo faltaría meterle tus propios estilos.

body{
 padding:50px;
} 
input[type="text"][required]:focus + label[placeholder]:before,
input[type="tel"][required]:focus + label[placeholder]:before,
input[type="password"][required]:focus + label[placeholder]:before,
input[type="email"][required]:focus + label[placeholder]:before,
form select[required]:focus + label[placeholder]:before
{
  color: #3399CC;
}

input[type="text"][required]:focus + label[placeholder]:before,
input[type="text"][required]:valid + label[placeholder]:before,
input[type="tel"][required]:focus + label[placeholder]:before,
input[type="tel"][required]:valid + label[placeholder]:before,
input[type="email"][required]:focus + label[placeholder]:before,
input[type="email"][required]:valid + label[placeholder]:before,
input[type="password"][required]:focus + label[placeholder]:before,
input[type="password"][required]:valid + label[placeholder]:before,
form select[required]:focus + label[placeholder]:before,
form select[required]:valid + label[placeholder]:before
{
  -webkit-transition-duration: .2s;
  transition-duration: .2s;
  -webkit-transform: translate(0, -0.8em) scale(0.9, 0.9);
  transform: translate(0, -0.8em) scale(0.9, 0.9);
}
input[type="text"][required]:invalid + label[placeholder][alt]:before,
input[type="tel"][required]:invalid + label[placeholder][alt]:before,
input[type="password"][required]:invalid + label[placeholder][alt]:before,
input[type="email"][required]:invalid + label[placeholder][alt]:before,
form select[required]:invalid + label[placeholder][alt]:before
{
  content: attr(alt);
}
input[type="text"][required] + label[placeholder],
input[type="tel"][required] + label[placeholder],
input[type="password"][required] + label[placeholder],
input[type="email"][required] + label[placeholder],
form select[required] + label[placeholder] 
{
  display: block;
  pointer-events: none;
  line-height: 1.25em;
  margin-top: calc(-1.5em - 2px);
  margin-bottom: calc((3em - 1em) + 2px);
  font-size: 0.85em;
  font-weight: normal;
}


input[type="text"][required] + label[placeholder]:before,
input[type="password"][required] + label[placeholder]:before,
input[type="tel"][required] + label[placeholder]:before,
input[type="email"][required] + label[placeholder]:before,
form select[required] + label[placeholder]:before
{
  content: attr(placeholder);
  display: inline-block;
  margin: 2px;
  padding: 0 6px;
  color: #9C9C9C;
  white-space: nowrap;
  -webkit-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
  background-image: -webkit-linear-gradient(top, #fff, #fff);
  background-image: linear-gradient(to bottom, #fff, #fff);
  background-size: 100% 5px;
  background-repeat: no-repeat;
  background-position: center;
}
<div class="form-group">
  <input type="password" class="form-control" required>
  <label placeholder="Ingresar NIP" for=""></label>
</div>

1
  • Muy interesante.
    – A. Cedano
    Commented el 18 sept. 2017 a las 23:12

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.