Behandlung von Radio-Buttons & Checkboxen

2002Andreas

Zitat von Mira_Belle

dass nur nach den Bereichen

Hier sieht das so aus:

Wichtig finde ich, man muss selber wissen wo was zu finden ist

grisu2099

Zitat von 2002Andreas

man muss selber wissen wo was zu finden ist

Das ist das Allerwichtigste

Horstmann

Zitat von Mira_Belle

Ob es Unterschiede zwischen den Betriebssystemen gibt?
Dein Code funktioniert hier auf meinem Windowsrechner nicht!
Getestet in einem Profil ohne irgendwelche anderen Anpassungen!

Zitat von Horstmann

Die ganze Anwendung von checked macht für mich auch keinen Sinn.

Mag Dir nicht einleuchtend sein, aber die Selektoren habe das Attribut [checked = "true"] oder [checked = " "]
oder eben [checked = "false"].
Das mache ich mir zunutze.

Die eigentliche Idee war eher sowas.

[checked] und :not([checked]) sind dann nochmal etwas anders.

Sören Hentzschel

Den Kommentar verstehe ich jetzt nicht wirklich, da der von dir verlinkte Code ebenfalls [checked="true"] und [checked="false"] verwendet. Und damit seid ihr beide nicht auf dem aktuellen Stand. Denn das gilt nur bis Firefox 148. Seit Firefox 149 sind [checked] und :not([checked]) zu verwenden.

2008041 - Make XUL disabled / checked attributes html-style boolean attributes.

RESOLVED (emilio) in Core - XUL. Last updated 2026-03-06.

bugzilla.mozilla.org

.DeJaVu

Vermutlich liegt das an der genutzten Version 115 < 148. Damit ist man halt abgehängt.

Mira_Belle

Zitat von Sören Hentzschel

Und damit seid ihr beide nicht auf dem aktuellen Stand.

Oh, danke nochmals für diesen Hinweis!
Ich hatte nur an einer Stelle im CSS noch [checked="true"] stehen und habe es korrigiert.
Mh, und an einer Stelle noch [checked="false"], auch korrigiert.

Horstmann

Zitat von Sören Hentzschel

Den Kommentar verstehe ich jetzt nicht wirklich, da der von dir verlinkte Code ebenfalls [checked="true"] und [checked="false"] verwendet. Und damit seid ihr beide nicht auf dem aktuellen Stand. Denn das gilt nur bis Firefox 148. Seit Firefox 149 sind [checked] und :not([checked]) zu verwenden.
https://bugzilla.mozilla.org/show_bug.cgi?id=2008041

Ahh, jetzt macht das Sinn, danke!
Genau danach hatte ich die Tage schon gefragt, aber das geht ja kreuz und quer hier.
Auch Sinn macht jetzt das hier.

Spezifieren müsste man das aber immer noch, oder nicht?

ZB würde menuitem[checked] nur für checkbox und radio angewandt, weil nur die das Attribut haben können (?), aber menuitem:not([checked]) würde jedes menuitem ansprechen, das nicht das Attribut hat?

Zitat von .DeJaVu

Vermutlich liegt das an der genutzten Version 115 < 148.

115 - 149 .

.DeJaVu

Wo hast du das mal verwiesen? Bislang lese ich öfters eben v115.

Das mit =true bzw =false gerät mehr und mehr in den Hintergrund.

Horstmann

Siehe Sören's Antwort, ab 149 ist das wohl relevant in diesem Fall.

Und ja, das true/false Ding ist schon lange im Rückzug.

Sören Hentzschel

Zitat von Horstmann

Spezifieren müsste man das aber immer noch, oder nicht?
ZB würde menuitem[checked] nur für checkbox und radio angewandt, weil nur die das Attribut haben können (?), aber menuitem:not([checked]) würde jedes menuitem ansprechen, das nicht das Attribut hat?

Ja, das entsprechende type-Attribut mit einzubeziehen, ist wahrscheinlich sinnvoll.

Horstmann

Prima.

Dann hätte ich noch einen Vorschlag:

CSS

/* nur Mac ? */
/*
menupopup > :is(menu, menuitem) {
    appearance: none !important;
}
*/

/*  Alle Fx Icons für checked weg  */
menupopup > menuitem:is([type="checkbox"], [type="radio"]) > :is(img, image) {
    display: none !important;
}

/*  Basis Icon checked alle erstellen  */
menupopup > menuitem[type="radio"]::before,
menupopup > menuitem[type="checkbox"]::before {
    content: '';
    height: 16px;
    width: 16px;
    margin-right: 6px;
    -moz-context-properties: fill, stroke, fill-opacity, stroke-opacity;    
    background-image: url("chrome://global/skin/icons/check.svg");
    background-repeat: no-repeat !important;
    background-size: 16px 16px !important;
    background-position: center !important;
}

/*  Icons inaktiv alle  */
menupopup > menuitem[type="radio"]:not([checked])::before,
menupopup > menuitem[type="checkbox"]:not([checked])::before {
    background-image: url("chrome://devtools/skin/images/checkbox.svg");
}

/*  nur fuer anderes Icon inaktive Checkbox, nicht Radio, optional  */
menupopup > menuitem[type="checkbox"]:not([checked])::before {
    background-image: url("chrome://global/skin/icons/close.svg");
    fill: red !important;
}

/*  nur fuer Kompatibilitaet vor 149  */
/*
menupopup > menuitem[type="checkbox"][checked="false"]::before,
menupopup > menuitem[type="radio"][checked="false"]::before {
    background-image: url("chrome://devtools/skin/images/checkbox.svg");
}

menupopup > menuitem[type="checkbox"][checked="false"]::before {
    background-image: url("chrome://global/skin/icons/close.svg");
    fill: red !important;
}
*/

Alles anzeigen

Soll so aussehen:

Mira_Belle

Grundsätzlich funktioniert das,
aber es wirkt aber unter Windows dann auch im Ansichtenmenü!
Und da funktioniert es dann eben auch nicht richtig.

Ist auch im Testprofil so! Also jenes ohne irgendwelche Anpassungen.

.DeJaVu

Evtl. sind spezielle Menüs auch speziell einzustellen, nur so ein Gedanke.

Mira_Belle

Zitat von .DeJaVu

Evtl. sind spezielle Menüs auch speziell einzustellen, nur so ein Gedanke.

Ich denke, ich habe es entsprechend eingeengt.

CSS

@-moz-document url(chrome://browser/content/browser.xhtml) {

	/* ----------------------------------------------- */
	/* ------------- Checkboxen allgemein ------------ */
	/* ----------------------------------------------- */
    
    /* Symbol ausblenden, wenn Option deaktiviert */
    menupopup > menuitem[type="checkbox"] > img.menu-icon,
    menupopup > menuitem[type="checkbox"]:not([checked]) > img,
    menupopup > menuitem[type="checkbox"][checked] > img {
        display: none !important;
    }

    /* Eigenes Symbol einfügen, wenn Option aktiviert */

    menupopup > menuitem[type="checkbox"][checked]::before {
        content: '' !important;
        display: block !important;
        width: 16px !important;
        height: 16px !important;
        margin-left: 0px !important;
        margin-right: 6px !important;
        background-image: url("../icons/menu-check_lime.svg") !important;
        background-repeat: no-repeat !important;
        background-size: 16px 16px !important;
        background-position: center !important;
    }

    /* Eigenes Symbol einfügen, wenn Option deaktiviert */

    menupopup > menuitem[type="checkbox"]::before {
        content: '' !important;
        display: block !important;
        width: 16px !important;
        height: 16px !important;
        margin-left: 0px !important;
        margin-right: 6px !important;
        background-image: url("../icons/stop_smal_red.svg") !important;
        background-repeat: no-repeat !important;
        background-size: 16px 16px !important;
        background-position: center !important;
    }

    menupopup > menuitem#goOfflineMenuitem[type="checkbox"]::before,
    menupopup > menuitem#fullScreenItem[type="checkbox"]::before {
        visibility: collapse !important;
    }


    /* --- Symbolleisten --- */

    #toggle_PersonalToolbar > menupopup > menuitem[type="radio"][checked] > .menu-icon {
            display: none !important;
        }
  
    #toggle_PersonalToolbar > menupopup > menuitem[type="radio"][checked]::before {
        content: url("../icons/menu-check_lime.svg") !important;
        /*content: url("chrome://global/skin/icons/settings.svg") !important; */
        display: block !important;
        width: 16px !important;
        height: 16px !important;
        margin-left: -2px !important;
        margin-right: 10px !important;
    }

    #toggle_PersonalToolbar > menupopup > menuitem[type="radio"]:not([checked])::before {
        content: url("../icons//square_2.svg") !important;
        /*content: url("chrome://global/skin/icons/close.svg") !important; */
        display: block !important;
        width: 16px !important;
        height: 16px !important;
        margin-left: -2px !important;
        margin-right: -14px !important;
    }


    /* ------ Sidebar ------ */

	/* Eigenes Symbol einfügen, wenn Option aktiviert */
	menupopup > menuitem#menu_historySidebar[type="checkbox"][checked]::before,
	menupopup > menuitem#menu_tabsSidebar[type="checkbox"][checked]::before,
	menupopup > menuitem#menu_bookmarksSidebar[type="checkbox"][checked]::before,
	menupopup > menuitem#menu_genaiChatSidebar[type="checkbox"][checked]::before,
	menupopup > menuitem#menu_megalistSidebar[type="checkbox"][checked]::before {
        background-image: url("../icons/menu-check_lime.svg") !important;
	}

	/* Eigene Symbole für inaktiven Einträge */

    /* Chronik */
	menuitem[id="menu_historySidebar"][type="checkbox"]::before {
		background-image: url("../icons/history.svg") !important;
	}
    /* Synchronisierte Tabs */
	menuitem[id="menu_tabsSidebar"][type="checkbox"]::before {
		background-image: url("../icons/Dock Side Left.svg") !important;
	}
    /* Lesezeichen */
	menuitem[id="menu_bookmarksSidebar"][type="checkbox"]::before {
		background-image: url("../icons/bookmark.svg") !important;
	}
    /* KI-Chatbot */
	menuitem[id="menu_genaiChatSidebar"][type="checkbox"]::before {
		background-image: url("../icons/robot-icon.svg") !important;
	}
    /* Passwörter */
	menuitem[id="menu_megalistSidebar"][type="checkbox"]::before {
		background-image: url("../icons//passwords.svg") !important;
	}


    /* -------- Zoom -------- */

    /* Nur Text zoomen, aktiviert */
    menupopup > #toggle_zoom[type="checkbox"][checked]::before {
        content: '' !important;
        display: block !important;
        width: 16px !important;
        height: 16px !important;
        margin-left: -22px !important;
        margin-right: 6px !important;
        background-image: url("../icons/menu-check_lime.svg") !important;
        background-repeat: no-repeat !important;
        background-size: 16px 16px !important;
        background-position: center !important;
    }

    /* Nur Text zoomen, deaktiviert */
    menupopup > #toggle_zoom[type="checkbox"]::before {
        content: '' !important;
        display: block !important;
        width: 16px !important;
        height: 16px !important;
        margin-left: -22px !important;
        margin-right: 6px !important;
        background-image: url("../icons/stop_smal_red.svg") !important;
        background-repeat: no-repeat !important;
        background-size: 16px 16px !important;
        background-position: center !important;
    }


    /* --- Webseiten-Stil --- */

    /* Symbol ausblenden, wenn Option aktiviert */
    #menu_pageStyleNoStyle[type="radio"] > .menu-icon,
    #menu_pageStylePersistentOnly[type="radio"] > .menu-icon {
        visibility: hidden !important;
    }

    /* Symbol einfügen, wenn Option inaktiv */
    #menu_pageStyleNoStyle[type="radio"]:not([checked])::before,
    #menu_pageStylePersistentOnly[type="radio"]:not([checked])::before {
        content: url("../icons//square_2.svg") !important;
        /*content: url("chrome://global/skin/icons/warning.svg") !important; */
        display: block !important;
        width: 16px !important;
        height: 16px !important;
        margin-left: -2px !important;
        margin-right: -18px !important;
    }

    /* Symbol einfügen,  wenn Option aktiviert */
    #menu_pageStyleNoStyle[type="radio"]::before,
    #menu_pageStylePersistentOnly[type="radio"]::before {
        content: url("../icons/menu-check_lime.svg") !important;
        /*content: url("chrome://global/skin/icons/delete.svg") !important; */
        display: block !important;
        width: 16px !important;
        height: 16px !important;
        margin-left: -2px !important;
        margin-right: -18px !important;
    }
}

Alles anzeigen

Ich finde, das sieht gar nicht schlecht aus,
und Fehlverhalten habe ich jetzt auch nicht mehr feststellen können.
Wirkt wohl nur noch da, wo es auch wirken soll.

Horstmann

Zitat von Mira_Belle

Grundsätzlich funktioniert das,
aber es wirkt aber unter Windows dann auch im Ansichtenmenü!
Und da funktioniert es dann eben auch nicht richtig.
Ist auch im Testprofil so! Also jenes ohne irgendwelche Anpassungen.

Die Menüleistenmenüs kann ich halt am Mac leider gar nicht testen; es sieht so aus als würde das Fx Icon in dem Fall nicht entfernt.

Man kann diese Menüs auch ausschliessen, je nachdem was man ansprechen will.

In deinem neuen Code könntest du vermutlich die negativen margins unten einsparen, wenn du in Zeile 148 statt visibility: hidden display:none oder visibility:collapse benutzt; visibility: hidden gibt den Platz nicht frei von dem Element.

Lässt sich aber am besten in den Werkzeugen sehen, nur komm ich an den Teil halt nicht ran.

Mira_Belle

Zitat von Horstmann

Die Menüleistenmenüs kann ich halt am Mac leider gar nicht testen;

Dem war ich mir bewusst, ich wollte Dir nur Feedback geben.
Und im Normalzustand sind an den zwei Stellen überhaupt keine Symbole.
Bzw. nur bei "Vollbild" ist keines, bei "Nur Text zoomen" nur wenn aktiviert
und dann ist da das Häkchen.
Eventuell hat ja jemand anderes eine elegantere Lösung, als meine.

Behandlung von Radio-Buttons & Checkboxen

Beitrag von Horstmann (8. April 2026 um 11:27)

Ähnliche Themen

Probleme bei Firefox 149