I'm doing a project that uses Mapbox. Used as auto-complete and user location functions, it's exactly what I need and it works the way I need it.

But I would like to style these elements, or at least put these functions in the fields I already have. But I am not able to do this at all.

How could I style these elements with some freedom?

In the screenshot attached has the auto-complete and the field I want to put it in, in addition to the location button at the bottom that I want to style following the project's visual pattern.

I've tried selecting elements after inspecting by browser and styling by classes by css, but unfortunately it didn't work.

I've also read their documentation and unfortunately I didn't find anything about them either.

Screenshot of my website

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>