javascript - How to remove rounded corners from leaflet popup - Stack Overflow

admin管理员组

文章数量:1303373

I want to make the edges of my leaflet popup box sharp (corners) instead of rounded edges. I have downloaded the source leaflet-src.js but can't seem to find where the this is happening. Places I've looked for are in the class:

   leaflet-popup-content-wrapper
   leaflet-popup-content
   leaflet-popup-close-button

Does anyone know where this is happening?

I want to make the edges of my leaflet popup box sharp (corners) instead of rounded edges. I have downloaded the source leaflet-src.js but can't seem to find where the this is happening. Places I've looked for are in the class:

   leaflet-popup-content-wrapper
   leaflet-popup-content
   leaflet-popup-close-button

Does anyone know where this is happening?

• javascript
• styles
• leaflet
• rounded-corners

Share Improve this question Follow asked Nov 26, 2013 at 16:15 fifamaniac04fifamaniac04 2,3831414 gold badges5151 silver badges7575 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 9

you can override the default style by adding !important key word

For example:- put this class inside your page this will over ride the border style

.leaflet-popup-content-wrapper,.leaflet-popup-content
{
 border-radius:0 !important;
}

For multiple browser support

 .leaflet-popup-content-wrapper,.leaflet-popup-content
 {
   -webkit-border-radius: 0 !important;
   -moz-border-radius: 0 !important;
    border-radius: 0 !important;
 }

First thing is that you have to find which tag is making the radius and over ride that class you can use the developer tool for identifying that.

I've not used leaflet.js, but this sounds like a CSS issue more than Javascript. The .leaflet-popup-content-wrapper class has border-radius: 12px, which seems relevant. Specified here in the source.

本文标签： javascriptHow to remove rounded corners from leaflet popupStack Overflow