Can't get Leaflet legend to display properly

Question

I'm trying to display what I assumed would be something trivial- display a legend on a leaflet map. But I've spent about 6 hours now trying to get it to work to no avail. All I want to do is display a box with mostly opaque, with a small square and then a text label next to each square giving a meaning for its color.

But no matter what I try, I can only get the text to display and can't get any type of shape to display in any of the colors, nor can I get the legend to show in a nice gray box like all the web examples show. Here is the Javascript code:

    function  getColor(s) {
        if ( s === 'Last update <2 hours ago') 
            return 'yellow';
        else if ( s === 'Last update >24 hours ago' ) 
            return 'blue';
        else 
            return 'black';
    }
    var legend = L.control({position: 'topright'});


    legend.onAdd = function (map) {
        var legendDiv =  L.DomUtil.create('div', 'info legend'),
           checkins = ['Last update > 30 days ago', 'Last update >24 hours ago', 'Last update <2 hours ago'],
           title= ['<strong>Marker Color Codes</strong>'],
            labels = [];
        for ( var i=0; i < checkins.length; i++) {
            labels.push( 
                '<i class="square" style="background:' + getColor(checkins[i]) + '"></i>'+ checkins[i] + '')
        }
        legendDiv.innerHTML = labels.join('<br>');


        return legendDiv;
    }

    legend.addTo(map);

And here is the css:

    .legend { 
        border: 5px solid black;
        font-weight: bold;
        color: blue;
        text-align: left;
        width: 250px;
        height: 240px;
        line-height: 18px;
        background: white;
        opacity: 1;
    }
    .legend i {
            width: 50px;
            height: 50px;
            float: left;
            margin-right: 8px;
            opacity: 0.7;
    }
    .legend square {
            border-radius: 50%;
            width: 50px;
            height: 50px;
            margin-top: 8px;
    }

I've been playing with all sorts of border and legend sizes, so don't focus too much on the width and height parameters. I can't get any size to make a difference. Here is a screenshot of what is displayed:

What I'd like to see is just what all the examples show- a square box with a gray background (color is not material) with a small square of color followed by a text string that describes the significance of that color.

What am I doing wrong here?

Thanks for any help.

Answer 1

I know this question is old, but I just had the same problem. The background color in the css for the L.DomUtil.create('div', 'info legend') can be changed this way:

<style>
    .info.legend {
        background-color: white;
    }
<\style>

Answer 2

For whatever reason your CSS rules do not seem to be applied.

Once they are correctly added, your legend displays with whatever rules you have set: https://plnkr.co/edit/qAjh0duPRI4US6Q4DSCN?p=preview