Quiero crear una entrada que, cuando haga clic en ella, aparezca una barra en la parte inferior de la entrada que comience a la izquierda y luego se mueva hacia el otro lado de la entrada.
Es simple pero agrega un pop al formulario que quiero crear.
input[type=text] { background-color:transparent; border-top-style: none; border-right-style: none; border-bottom-style: solid; border-left-style: none; border-color: red; border-width: 5px; height: 50px; width:200px; font-size: 25px; }No sé cómo hacer esto ya que no soy el mejor en CSS.
¡Gracias!
Creo que este código podría ayudarte.
* { box-sizing: border-box; } .input { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; } input[type=text] { background-color:transparent; border: none; outline: none; height: 50px; width:200px; font-size: 25px; position: relative; z-index: 1; } input[type="text"] ~ span { display: block; height: 5px; width: 0px; background-color: black; transition: width .3s ease; } input[type="text"]:focus ~ span { width: 200px; } <div class="input"> <input type="text"> <span></span> </div>Lo que desea hacer es agregar un elemento .dropdown después del elemento de input y colocar ambos dentro de un contenedor. Luego dale al .dropdown un estilo básico y agrega position: relative and left: 0 para que comience su transición desde la izquierda, que se establece con:
transition: width /* what to apply it to */ 500ms /* how long does it take */ 50ms /* initial delay */; El ancho inicial de .dropdown de 0 se cambia al pasar el mouse por:
.container:hover /* the element you hover over to start the transition */ .dropdown { /* the element you want to apply the transition to */ /* ... */ } .container { width: 200px; height: 10px; } .container:hover .dropdown { width: 100%; } input[type=text] { background-color:transparent; border-top-style: none; border-right-style: none; border-bottom-style: solid; border-left-style: none; border-color: red; border-width: 5px; height: 50px; width:200px; font-size: 25px; } .dropdown { position: relative; left: 0; width: 0; height: 100px; background-color: blue; transition: width 500ms 50ms; } <form class="container"> <input type="text"> <div class="dropdown"></div> </form>