1

Espero que estén bien!

Lo que quiero lograr es que si tengo un texto demasiado largo en un placeholder, en pantallas pequeñas se muestra hasta cierto punto.

Ejemplo: INGRESE LA FECHA DE NACIMIENTO,(AÑO/MES/DIA)

Y en pantalla pequeña: INGRESE LA FECHA DE NACÍ

Como puedo agregar un efecto donde el texto del placeholder haga una transición que permita leer todo el texto. (que el texto vaya de derecha a izquierda y un efecto suave)

1
  • Cuando dices pantalla chicas (o chica) significa pequeña, en una pantalla pequeña? Y otra pregunta, donde pones ejemplo eso tiene que ser texto diciendo de introducir la fecha y luego abajo el actual placeholder?
    – Jack More
    el 4 sep. 2020 a las 0:11

1 respuesta 1

2

Lo que se puede hacer es una animación al placeholder para mostrarlo arriba del input así.

label {
  margin:20px 0;
  position:relative;
  display:inline-block;
}
  
span {
  padding:10px;
  pointer-events: none;
  position:absolute;
  left:0;
  top:0;
  transition: 0.2s;
  transition-timing-function: ease;
  transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
  opacity:0.5;
}

input {
  padding:10px;
}

input:focus + span, input:not(:placeholder-shown) + span {
  opacity:1;
  transform: scale(0.75) translateY(-100%) translateX(-30px);
}

/* For IE Browsers*/
input:focus + span, input:not(:-ms-input-placeholder) + span {
  opacity:1;
  transform: scale(0.75) translateY(-100%) translateX(-30px);
}
<label>
  <input placeholder=" ">
  <span>Placeholder Text</span>
</label>

La cuestión es ir jugando en la linea transform: scale(0.75) translateY(-100%) translateX(-30px); y moverlo para donde quieras.

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.