I have added a layer toggler using Leaflet and geojson but the text of layer names is too light to see in the toggler - how do I style the text in a darker colour? It's on a wordpress site, if that makes a difference?

I used the usual L.control.layers(baseMaps, overlays).addTo(map);

faint toggler

  • Don't think it's leaflet configuration, can you send CSS rules about popup text? Mar 10, 2019 at 23:59

1 Answer 1


Text items in layer menu are embedded in several nested html elements:

enter image description here

There are many div elements that are by themselves harmless, but which have CSS Leaflet classes assigned to them: leaflet-control-layers, leaflet-control, leaflet-control-layers-list and leaflet-control-layers-base. Any of those classes can be overriden with font color definition.

Finaly there are three standard html elements: form, label and span. If for any of those elements font is changed globaly via css, it will reflect in menu items.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.