Contao Leaflet Maps: Wie "leaflet-control-layers-selector" mit CSS stylen?

Hallo zusammen,

ich hoffe, dass diese Frage halbwegs hier passt. :D Ich nutze mit großer Freude die Erweiterung "Contao Leaflet Maps" von David Molineus und versuche gerade, den so genannten "leaflet-control-layers-selector" mit CSS zu designen.

Leider scheitere ich daran, die im Selector vorhandenen Checkboxen mit CSS so anzusprechen, dass ich diese verändern kann.

Hat jemand eine Idee, mit welchem Selektor ich die Checkboxen denn so anpassen könnte, dass sie aussehen wie diese Checkbox? Ein Ausblenden der bisherigen Checkboxen ist zwar möglich, doch kann ich leider keine neuen Quadrate via

Code:

---

::before

---

-Tags darstellen.

Ganz herzlichen Dank! :)

Die Optik in Deinem Wunsch-Beispiel ist mit :before gesetzt. Sieht man bei der Untersuchung des Codes in den Entwicklertools des Browsers Deiner Wahl.

Hallo,
das wird nur funktionieren, wenn Du die Struktur des HTML-Codes anpasst.

Für diesen kleinen CSS-Hack muss das Label im Code nach der Checkbox stehen:

HTML-Code:

---

<span>
    <input type="checkbox" name="channels[]" id="opt_38_1" value="1" class="checkbox">
    <label for="opt_38_1">Newsletter_Radentscheid</label>
</span>

---

So ist es auch auf Deiner Newsletter-Seite, aber eben nicht im Code der Karte, da umschließt das Label die checkbox:

HTML-Code:

---

<label>
    <div>
        <input type="checkbox" class="leaflet-control-layers-selector" checked="">
        <span> RVK_Radhauptnetz</span>
    </div>
</label>

---

LG
Hella