Estoy creando una barra de búsqueda en mi HTML y estoy tratando de poner un botón de lupa al final. Se ve bien en el escritorio, pero en el móvil el botón es más alto que la barra de búsqueda. Muchas gracias si sabe cómo hacer que tenga la misma altura en cada ventana gráfica.
.autocomplete { position: absolute; top: 50%; left: 15%; } button[type=reset] { background-color: #34587F; color: #fff; position: absolute; border: 0; font-size: 2vw; border-radius: 10%; width: 20%; height: 100%; } <div class="autocomplete" style="width:40%; font-family: 'Fjalla One'"> <input id="searchField" type="text" name="search" placeholder="SEARCH" /> <button type="reset" id="submit" onclick="goTo();"><i class="bi bi-search"></i> </button> </div>Parece que está configurando la altura del reset a la height: 100% para el div principal de autocomplete . Asegúrese de que también está configurando la altura del campo de input / searchField a la misma altura (es decir, 100% ) para que coincida con la del botón de reset . Si tienen el mismo estilo, asegúrese de establecer una altura para la clase de autocomplete . Tener una altura no establecida para un padre absolutamente posicionado, con hijos de altura relativa, puede estar causando sus problemas.
