Tengo el siguiente código de una barra de búsqueda, al momento de posicionar los elementos, el input
que funciona como busqueda aparece más grande que los demás, posicionándose arriba y expandiéndose conforme se escribe.
¿Cómo podría justificar el elemento búsqueda para que solo ocupe el espacio disponible después de los select
?
Esto sin afectar el espacio del texto en los select
y el boton de buscar.
.card { width:75%; height:35px; margin: 0 auto; padding-left: 10px; background-color:#fafafa; background-position: 8px 8px; background-repeat: no-repeat; box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2); transition: 0.3s; border-radius: 2px; } .card-options{ display: inline-block; margin: 0 auto; width:100%; height:100%; } input#busqueda{ border: none; padding: 0 0 0 10px; margin: 0px; height: 35px; width: 40%; position: absolute; z-index: 1; background-color: transparent; outline-color: transparent; border-radius: 2px; font-size: 17px; } select.mdl-textfield__input{ margin-top:4px; display: inline-block; width:120px; outline-color: transparent; }
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css"> <script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script> <div class="card"> <div class="card-options"> <select id="grupos" class="mdl-textfield__input"> <option value="Grupo" name="grupo">Grupo</option> </select> <select id="marcas" class="mdl-textfield__input"> <option value="Marca" name="marca">Marca</option> </select> <input id="busqueda" placeholder="Escriba su busqueda" type="text" name="busqueda"/> <input id="buscar" type="submit" style="float:right;" value="Buscar" class="mdl-button mdl-button--colored mdl-button--raised mdl-js-button mdl-js-ripple-effect"/> </div> </div>