How do i add css to leaflet buttons?

Question

I am trying to change the CSS on the zoom buttons in leaflet, but I am not able to add a class or id or anything to those buttons. How do I even get access to them?

Any idea?

thanks!

here I declare the map:

L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
    attribution: 'Map data © OpenStreetMap contributors, CC-BY-SA, Imagery © Mapbox',
    maxZoom: 18,
    id: 'mapbox.streets',
    accessToken: 'pk.eyJ1IjoicHcxN2wwMDgiLCJhIjoiY2pua2c2OWxuMGVkOTNxbWh5MWNqajEwdyJ9.X_SuGwNGs12TwCsrsUvBxw'
}).addTo(map);

and here I include the zoom:

L.control.zoom({
    position: 'topright',
}).addTo(map);

when the page loads I see that it becomes a button with a number of leaflet classes but how can I make my out changes to them?

user_4929531 · Answer

I guess there are other ways but in order to change the style of the zoom buttons you can access the built in css selectors as follows:

.leaflet-touch .leaflet-bar a {
  width: 50px;
  background-color: red;
}

var map = L.map('mapid').setView([51.505, -0.09], 13);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '© OpenStreetMap contributors'
}).addTo(map);

L.marker([51.5, -0.09]).addTo(map)
  .bindPopup('A pretty CSS3 popup.
 Easily customizable.')
  .openPopup();

#mapid {
  height: 180px;
}

.leaflet-touch .leaflet-bar a {
  width: 50px;
  background-color: red;
}

body {
  margin: 0px;
}

or using js:

document.getElementsByClassName("leaflet-control-zoom-out")[0].style.setProperty('width', '50px');

document.getElementsByClassName("leaflet-control-zoom-out")[0].style.setProperty('background-color', 'red');

How do i add css to leaflet buttons?

1 Answers