How to Change Mapbox Geocoder Search bar size?

Question

I already added the geocode search tab.

map.addControl(new MapboxGeocoder({
accessToken: mapboxgl.accessToken,
bbox: [-74.390249, 40.414685, -73.519390, 40.976805] ,
zoom: 15,}));

I also tried creating a variable called geocoder and through CSS tried to style, but it didn't work. My CSS file is referenced to the HTML and js file. I believe this should be an easy fix. Hopefully, I can get some help.

var geocoder = map.addControl(new MapboxGeocoder({
accessToken: mapboxgl.accessToken,
bbox: [-74.390249, 40.414685, -73.519390, 40.976805] ,
zoom: 15,}));

Answer 1

.mapboxgl-ctrl-geocoder {
    width: 300px!important;
}

This worked for me by placing into styles.scss in my angular app.

Answer 2

Way to late but targeting the input should do the trick.

.mapboxgl-ctrl-geocoder--input {
   font-size: 300px;
}