如何在Leaflet图层控件中更改背景样式(css)

时间:2019-10-06 15:09:55

标签: css leaflet

我关闭了leaflet.css中的“图层控制”背景,但是黑色框架仍然存在。如何在CSS中禁用它?我将不胜感激。 我添加了参数:outline:无;盒子阴影:无; 边框:无,但在这里不起作用。

/* layers control */
.leaflet-control-layers {
    box-shadow: 0 0px 0px rgba(0,0,0,0.0); 
    background: solid rgba(0,0,0,0.0); 
    border-radius: 4px; 
    }
.leaflet-control-layers-toggle { 
    background-image: url("../../images/text/0_Filter.png");
    width: 106px;
    height: 22px;
    } 
.leaflet-retina .leaflet-control-layers-toggle { 
    background-image: url("../../images/text/0_Filter.png");
    background-size: 106px 22px;
    }
.leaflet-touch .leaflet-control-layers-toggle { 
    width: 106px;
    height: 22px;
    outline: none; /* test dont work*/
    box-shadow: none; /* test dont work*/
    border: none /* test dont work*/
    }
.leaflet-control-layers .leaflet-control-layers-list,
.leaflet-control-layers-expanded .leaflet-control-layers-toggle {
    display: none;
    }
.leaflet-control-layers-expanded .leaflet-control-layers-list {
    display: block;
    position: relative;
    }
.leaflet-control-layers-expanded {
    padding: 6px 10px 6px 6px;
    color: #333;
    background: #fff; 
    }
.leaflet-control-layers-scrollbar {
    overflow-y: scroll;
    overflow-x: hidden;
    padding-right: 5px;
    }
.leaflet-control-layers-selector {
    margin-top: 2px;
    position: relative;
    top: 1px;
    }
.leaflet-control-layers label {
    display: block;
    }
.leaflet-control-layers-separator {
    height: 0;
    border-top: 1px solid #ddd;
    margin: 5px -10px 5px -6px;
    }

1 个答案:

答案 0 :(得分:0)

根据实时网站,该<a>标签的包装中有一个边框。

您需要删除边框,如下所示:

.leaflet-touch .leaflet-control-layers {
  border: none;
}