I do a map using Leaflet, and I'd like to change the background color of a popup. I included the following rule to change the color of the popup and popup tip in <style>. Nevertheless, the box changes its color* but the tip (triangle) remains white.
How can I solve it?

    .mypopup.leaflet-popup-content-wrapper{
        background-color: gray;
        opacity: 0.9;
    }
    .mypopup.leaflet-popup-tip {
        color: red;
 }

screenshot

up vote 3 down vote accepted

This is probably more suitable question for Stackoverflow as it is related to CSS and not so much GIS. The solution below should work as the mypopup.leaflet-popup-tip class is still referencing the default CSS background color; in essence your current CSS for mypopup.leaflet-popup-tip class isn't doing anything. I tested this in my browser web dev tools and it worked for me.

.mypopup.leaflet-popup-content-wrapper{
    background-color: gray;
    opacity: 0.9;
}
.mypopup.leaflet-popup-tip {
    background: red;
}

enter image description here

Your Answer

 

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

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