Estoy haciendo un proyecto que usa Mapbox. Usado como funciones de autocompletar y ubicación de usuario, es exactamente lo que necesito y funciona de la manera que lo necesito.

Pero me gustaría diseñar estos elementos, o al menos poner estas funciones en los campos que ya tengo. Pero no soy capaz de hacer esto en absoluto.

¿Cómo podría diseñar estos elementos con cierta libertad?

En la captura de pantalla adjunta tiene el autocompletar y el campo en el que quiero ponerlo, además del botón de ubicación en la parte inferior que quiero estilizar siguiendo el patrón visual del proyecto.

Intenté seleccionar elementos después de inspeccionar por navegador y diseñar por clases por css, pero desafortunadamente no funcionó.

También he leído su documentación y desafortunadamente tampoco encontré nada sobre ellos.

Captura de pantalla de mi sitio web

 map.addControl( new MapboxGeocoder({ accessToken: mapboxgl.accessToken, mapboxgl: mapboxgl, placeholder: "Para onde iremos?", }) );

 section header input { border: 1px solid var(--bg); border-radius: 50px 0 0 50px; color: var(--color-text); background: var(--bg); padding: 1rem; width: 100%; font-size: 1.125rem; text-overflow: ellipsis; }

 <header> <div id="barra-pesquisa"> <input id="searchTextField" type="text" placeholder="Para onde iremos?" autocomplete="on" /> <button id="criar-rota">Ir</button> </div> </header>