使用 pico.css 在传单中自定义放大缩小按钮

Question

来自传单中标记定制的答案：从标记中删除蓝色背景，现在我遇到以下问题：

.html 文件：

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css">

    <link rel="stylesheet" href="style.css">

    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"

    integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
    crossorigin=""/>

    <title>TITLE</title>
</head>
<body>             
        <div id="map"></div>
            <script src="https://unpkg.com/[email protected]/dist/leaflet.js"
            integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
            crossorigin=""></script>

            <script src="mapscript.js"></script>
</body>
</html>

样式.css：

#map { height: 500px; }

[role=button],button,input[type=button],input[type=reset],input[type=submit]{
    --background-color:none;
    --border-color:none;
    }

[role=button]:is([aria-current],:hover,:active,:focus),button:is([aria-current],:hover,:active,:focus),input[type=button]:is([aria-current],:hover,:active,:focus),input[type=reset]:is([aria-current],:hover,:active,:focus),input[type=submit]:is([aria-current],:hover,:active,:focus){
    --background-color:none;
    --border-color:none;
    }

.leaflet-control-zoom-in, .leaflet-control-zoom-out {
    background-image: none;
    text-indent: -9999px;
    background-repeat: no-repeat;
    background-size: cover;
    border: none;
}

.leaflet-control-zoom-in {
    background-image: url('./immagini/plus-circle-svgrepo-com.svg');
}

.leaflet-control-zoom-out {
    background-image: url('./immagini/minus-circle-svgrepo-com.svg');
}

我无法理解如何从放大和缩小按钮中删除背景，因为我使用的是具有透明背景的 svg 文件。

Answer 1

要修复使用 pico.css 后放大和缩小奇怪的外观，您可以使用以下行

padding: 0px 0px;

所以技巧是在 pico.css 之后应用以下内容

<style>

[role=button],button,input[type=button],input[type=reset],input[type=submit]{
    --background-color:none;
    --border-color:none;
    padding: 0px 0px;
 
}

[role=button]:is([aria-current],:hover,:active,:focus),button:is([aria-current],:hover,:active,:focus),input[type=button]:is([aria-current],:hover,:active,:focus),input[type=reset]:is([aria-current],:hover,:active,:focus),input[type=submit]:is([aria-current],:hover,:active,:focus){
    --background-color:none;
    --border-color:none;
}

</style>

整个代码将是（作为示例）：

<!DOCTYPE html>
<html lang="en">
<head>
    <base target="_top">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <title>Quick Start - Leaflet</title>

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css">

 <link rel="stylesheet" href="pico.css">

    <link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />

<style>

[role=button],button,input[type=button],input[type=reset],input[type=submit]{
    --background-color:none;
    --border-color:none;
padding: 0px 0px;;
 
}

[role=button]:is([aria-current],:hover,:active,:focus),button:is([aria-current],:hover,:active,:focus),input[type=button]:is([aria-current],:hover,:active,:focus),input[type=reset]:is([aria-current],:hover,:active,:focus),input[type=submit]:is([aria-current],:hover,:active,:focus){
    --background-color:none;
    --border-color:none;
}

</style>

    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin=""/>


    <script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>

    <style>
        html, body {
            height: 100%;
            margin: 0;
        }
        .leaflet-container {
            height: 400px;
            width: 600px;
            max-width: 100%;
            max-height: 100%;
        }
    </style>

    
</head>
<body>



<div id="map" style="width: 600px; height: 400px;"></div>
<script>

    const map = L.map('map').setView([51.505, -0.09], 13);

    const tiles = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 19,
        attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
    }).addTo(map);

//  const marker = L.marker([51.5, -0.09]).addTo(map);


const LeafIcon = L.Icon.extend({
        options: {
//          shadowUrl: '',
            iconSize:     [32, 32],
//          shadowSize:   [50, 64],
            iconAnchor:   [22, 94],
//          shadowAnchor: [4, 62],
            popupAnchor:  [-3, -76]
        }
    });

    const greenIcon = new LeafIcon({iconUrl: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/library_maps.png'});

    const mGreen = L.marker([51.5, -0.09], {icon: greenIcon}).bindPopup('StackOverflow.com is good').addTo(map);

</script>

</body>
</html>

查看上面的结果

使用 pico.css 在传单中自定义放大缩小按钮

问题描述投票：0回答：1

1个回答

最新问题

使用 pico.css 在传单中自定义放大缩小按钮

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1