0

tengo este input que tiene un placeholder más largo del tamaño del input, no debo hacer crecer ese input ni vertical ni horizontalmente.

<div class="relative flex-grow focus-within:z-10 w-72">
    <input class="block w-full py-3 px-2 border-gray-900" placeholder="Buscar en username, número de posts, número de ventas, número de comentarios, número de guardados" type="text">
</div>                        
<script src="https://cdn.tailwindcss.com"></script>

Cómo puedo hacer para que el placeholder sea animado? Es decir que se mueva hacia la izquierda para que se pueda leer

He estado buscando pero los ejemplos que encuentro colocan el placeholder como titulo al hacerle click, cosa que no es lo que busco

1 respuesta 1

0

En teoría no puedes hacer una animación con el placeholder pero no significa que no puedas lograr el efecto, incluso sin usar javascript, te compartiré un código para lograr un efecto similar al de una aplicación móvil simulando el "Placeholder", en vez de lograr ese efecto puedes hacer tu propia animación fácilmente que se mueva hacia la izquierda, esto es solo un ejemplo de como puedes hacerlo.

Código completo:

body {
    font-family: sans-serif;
}

.label-before, .field input:valid + label::before, .field input:focus + label::before {
    line-height: 20px;
    font-size: 12px;
    top: -10px;
    background: #fff;
    padding: 0 6px;
    left: 9px;
}

.container {
    width: 80%;
    margin: 30px 10%;
}

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

.field label::before {
    content: attr(title);
    position: absolute;
    top: 0;
    left: 15px;
    line-height: 40px;
    font-size: 14px;
    color: #777;
    transition: 300ms all;
}

.field input {
    width: 100%;
    line-height: 40px;
    padding: 0 15px;
    box-sizing: border-box;
    font-size: 14px;
    color: #222;
    border: 1px solid #ccc;
    border-radius: 3px;
}

.field input:focus {
    outline: 0;
    border-color: blue;
}

.field input:valid + label::before {
    content: attr(data-title);
}

.field input:focus + label::before {
    color: blue;
}
<div class="container">
    
    <div class="field">
    <input type="text" required autocomplete="off" id="username" value="Ejemplo">
    <label for="username" title="Titulo de ejemplo" data-title="Titulo de ejemplo"></label>
</div>

<div class="field">
    <input type="password" required autocomplete="off" id="password">
    <label for="password" title="Contraseña de ejemplo" data-title="Contraseña de ejemplo"></label>
</div>
    
</div>

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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