I am using the Leaflet panel layers plug in and want to change the color of the border of each item in the overlay. I can change all of them at once in the css file but cant change them individually.

I would like the the border of the box DB Regio to be red for example and of DB Fernverkehr to be blue...

Without any success I tried creating a new css class in the css file of the plug in which I did like this:

 border: 1px solid 
 border-radius: 3px;

How I implemented it in my index.html file:

group: "Radsatzdrehmaschinen",
    collapsed: false,
    layers: [
            name: "DB Regio" + "=class=overlay_db_regio",
            layer: db_regio

Do I have to get rid of the css class where those boxes are already defined or do I need do to do something else ?

The full css file of the plug in can be found here


1 Answer 1


There is no "official" way of styling individual panel items, but it can be done "misusing" the fact that one of the HTML elements that constitutes panel item has internal Leaflet layer id _leaflet_id as element id.

For example, this panel item belongs to layer with _leaflet_id value 38:

<div class="leaflet-panel-layers-item active">
  <label class="leaflet-panel-layers-title">
    <i class="leaflet-panel-layers-icon">
      <i class="icon icon-drinking_water"></i>
    <input class="leaflet-panel-layers-selector" type="checkbox" checked="" value="38" id="38">
    <span class="">Drinking Water</span>

Using this into account, color of item border can be changed after panel control is added to the map with the following code:

var panelElement = document.getElementById(db_regio._leaflet_id);
panelElement.parentNode.parentNode.style = 'border-color: red';

That's how it looks like applied to official plugin example:

enter image description here

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.