Leaflet – How to Change Background Color of Modified Group Layer Control in Leaflet

leaflet

I've used jQuery append relocate a L.control.layers into an HTML containing. I've also modified them to look a little more like buttons. 

var crsh_group_buttons = L.control.layers(crash_grouping, null, {collapsed:false}).addTo(map); // add group control
$('#crash_grouping_html').append(crsh_group_buttons.onAdd(map)) // use this to add html tag to move around/edit control
$('.leaflet-top.leaflet-right').hide(); // use this to remove duplication

The HTML:

<div id = "crash_grouping_html"></div>

And the CSS: 

#crash_grouping_html {
  margin: 10px;
}

#crash_grouping_html input[type="radio"] {
  opacity: 0;
  position: fixed;
  width: 0;
}

#crash_grouping_html label {
    display: inline-block;
    background-color: #ddd;
    padding: 5px 10px;
    font-family: sans-serif, Arial;
    font-size: 16px;
    border: 2px solid #444;
    border-radius: 5px;
}

#crash_grouping_html label-background {
    color: #444;
}

#crash_grouping_html label:hover {
  background-color: #dfd;
}

The problem is that the background of the radio buttons within the HTML container ends up white and I'd like it to be clear, i.e. `opacity: 0;.

enter image description here

How do I change the opacity of the background behind the two radio buttons to clear?

I've tried changing the overall opacity, but that impacts the buttons as well. I've also tried placing the buttons in another container, but that doesn't return anything useful as well.

Best Answer

What helps in such cases is element inspector in browser debugger. You just have to check which class declares white background for your HTML element. In this case it is leaflet-control-layers-expanded class.

To get transparent background, just add this style definition:

.leaflet-control-layers-expanded {
  background-color: transparent;
}

Remark: This is not really GIS question, but pure HTML one, so it should actually be posted on Stack Overflow site.

Related Question