Hintergrund Kontextmenü + Drop down Menüs in Menüleiste

Firefox_94.0.1

Ich nutze aktuell folgenden Code:

CSS

/*3. Farbe Rechtsklickmenü + Dropdown menüs in Menüleiste*/
arrowscrollbox.menupopup-arrowscrollbox {
   --menuitem-hover-background-color: #2B2C86 !important;
   --panel-color: #fff !important;
   --menu-color: #fff !important;
   --menu-disabled-color: lightgrey !important;
   --panel-background: #000080 !important;
   --panel-border-color: #000080 !important;
   --panel-border-radius: 5px !important;
}

Mein Problem ist nun, dass sich dieser auch (teilweise) auf drop down Menüs auf Webseiten auswirkt, wenn diese auch als arrowscrollbox.menupopup-arrowscrollbox definiert sind. Kann der Code so angepasst werden, dass sich dieser nur noch auf die gewünschten Menüs auswirkt?

2002Andreas

Zitat von Firefox_94.0.1

Dropdown menüs in Menüleiste

Meinst du das so, also nur in der Menüleiste?

Wenn ja, dann teste bitte, Farben wenn dann anpassen:

CSS

/*3. Farbe Rechtsklickmenü + Dropdown menüs in Menüleiste*/
 #toolbar-menubar menupopup {
   --menuitem-hover-background-color: #2B2C86 !important;
   --panel-color: #fff !important;
   --menu-color: #fff !important;
   --menu-disabled-color: lightgrey !important;
   --panel-background: #000080 !important;
   --panel-border-color: #000080 !important;
   --panel-border-radius: 5px !important;
}

#toolbar-menubar menupopup :is(menu,menuitem):hover {
   color: red !important;
   background-color: lightblue !important;
}

Alles anzeigen

grisu2099

Teste folgende Variante:

CSS

@-moz-document url("chrome://browser/content/browser.xhtml") {
	/*3. Farbe Rechtsklickmenü + Dropdown menüs in Menüleiste*/
	arrowscrollbox.menupopup-arrowscrollbox {
   	--menuitem-hover-background-color: #2B2C86 !important;
   	--panel-color: #fff !important;
   	--menu-color: #fff !important;
   	--menu-disabled-color: lightgrey !important;
   	--panel-background: #000080 !important;
   	--panel-border-color: #000080 !important;
   	--panel-border-radius: 5px !important;
	}
}

Alles anzeigen

Wenn ich dich richtig verstanden habe, sollte das dein Problem lösen...

Firefox_94.0.1

Zitat von 2002Andreas

Zitat von Firefox_94.0.1

Dropdown menüs in Menüleiste

Meinst du das so, also nur in der Menüleiste?

Wenn ja, dann teste bitte, Farben wenn dann anpassen:

CSS

/*3. Farbe Rechtsklickmenü + Dropdown menüs in Menüleiste*/
 #toolbar-menubar menupopup {
   --menuitem-hover-background-color: #2B2C86 !important;
   --panel-color: #fff !important;
   --menu-color: #fff !important;
   --menu-disabled-color: lightgrey !important;
   --panel-background: #000080 !important;
   --panel-border-color: #000080 !important;
   --panel-border-radius: 5px !important;
}

#toolbar-menubar menupopup :is(menu,menuitem):hover {
   color: red !important;
   background-color: lightblue !important;
}

Alles anzeigen

Hier bleiben die unerwünschten Auswirkungen weg. Gibt es auch noch einen solchen Code für das Kontextmenü, welches sich mit einem rechtsklick im Browserfenster öffnet?

2002Andreas

Zitat von Firefox_94.0.1

mit einem rechtsklick

Teste bitte wieder:

CSS

#contentAreaContextMenu {
   --menuitem-hover-background-color: #2B2C86 !important;
   --panel-color: #fff !important;
   --menu-color: #fff !important;
   --menu-disabled-color: lightgrey !important;
   --panel-background: #000080 !important;
   --panel-border-color: #000080 !important;
   --panel-border-radius: 5px !important;
}

#contentAreaContextMenu :is(menu,menuitem):hover {
   color: red !important;
   background-color: lightblue !important;
}

Alles anzeigen

Firefox_94.0.1

Zitat von 2002Andreas

Zitat von Firefox_94.0.1

mit einem rechtsklick

Teste bitte wieder:

CSS

#contentAreaContextMenu {
   --menuitem-hover-background-color: #2B2C86 !important;
   --panel-color: #fff !important;
   --menu-color: #fff !important;
   --menu-disabled-color: lightgrey !important;
   --panel-background: #000080 !important;
   --panel-border-color: #000080 !important;
   --panel-border-radius: 5px !important;
}

#contentAreaContextMenu :is(menu,menuitem):hover {
   color: red !important;
   background-color: lightblue !important;
}

Alles anzeigen

Danke, auch der Code funktioniert wie gewünscht. Nur:

wenn ich im Kontextmenü einen Punkt wähle, hinter welchem sich ein zweites Menü öffnet (Bsp. "Einen KI-Chatbot fragen" findet der Code auf dieses Menü keine Anwendung. Dasselbe wenn ich auf Höhe der Tableiste das Kontextmenü öffne, wird auch dieses "klassisch" ohne die o.g. Anpassungen angezeigt.

grisu2099

Hast du meine Version aus #3 getestet? Da sollte das nicht auftreten...

Firefox_94.0.1

Zitat von grisu2099

Hast du meine Version aus #3 getestet? Da sollte das nicht auftreten...

Ja, die wirkt sich jedoch vollständig auch auf besagte Menüs auf Webseiten aus, was ich eig. nicht möchte.

grisu2099

Hast du mal eine Beispielseite dafür?

.DeJaVu

BrokenHeart hatte das einst für amazon herausgefunden. Ausklappmenüs auf amazon werden an anderer Stelle ebenfalls aufgebaut, aber mit Firefox-Elementen, so wie oben genannt. Daher ist eine Einschränkung via -moz-document sehr wichtig.

grisu2099

Zitat von .DeJaVu

Daher ist eine Einschränkung via -moz-document sehr wichtig.

Die ja im Beispiel in #3 enthalten ist. Deswegen wundert mich das...

.DeJaVu

Nach deiner Änderung schon, und das muss ja laut #4 und #6 so weit funktionieren. Weitere Untermenüs sind jedoch vermutlich gesondert anzusprechen, die müssten eine andere #ID haben, in Anlehnung an dein Element

Code

#contentAreaContextMenu[hasbeenopened]

KI wäre menu#context-ask-chat und danach menupopup[hasbeenopened], also

Code

#contentAreaContextMenu[hasbeenopened] menu#context-ask-chat[_moz-menuactive] > menupopup[hasbeenopened]

2002Andreas

Zitat von Firefox_94.0.1

Dasselbe wenn ich auf Höhe

Teste bitte:

CSS

#placesContext,
#placesContext [_moz-menuactive] > menupopup,
#toolbar-context-menu,
#toolbar-context-menu [_moz-menuactive] > menupopup,
#contentAreaContextMenu,
#contentAreaContextMenu [_moz-menuactive] > menupopup {
   --panel-color: #fff !important;
   --menu-disabled-color: lightgrey !important;
   --panel-background: #000080 !important;
   --panel-border-color: #000080 !important;
   --panel-border-radius: 5px !important;
}

#placesContext [_moz-menuactive],
#toolbar-context-menu [_moz-menuactive],
#contentAreaContextMenu [_moz-menuactive],
#contentAreaContextMenu :is(menu,menuitem):hover {
   color: red !important;
   background-color: lightblue !important;
}

Alles anzeigen

Edit:

Ich habe mal etwas gebastelt hier, diese Kurzform sollte auch ausreichen:

CSS

#placesContext,
#toolbar-context-menu,
#contentAreaContextMenu {
  &, menupopup, & [_moz-menuactive], :is(menu, menuitem):hover {
   --panel-color: #fff !important;
   --menu-disabled-color: lightgrey !important;
   --panel-background: #000080 !important;
   --panel-border-color: #000080 !important;
   --panel-border-radius: 5px !important;
   color: red !important;
   background-color: lightblue !important;
  }
}

Alles anzeigen

Teste also bitte mal.

Firefox_94.0.1

Zitat von 2002Andreas

Zitat von Firefox_94.0.1

Dasselbe wenn ich auf Höhe

Teste bitte:

CSS

#placesContext,
#placesContext [_moz-menuactive] > menupopup,
#toolbar-context-menu,
#toolbar-context-menu [_moz-menuactive] > menupopup,
#contentAreaContextMenu,
#contentAreaContextMenu [_moz-menuactive] > menupopup {
   --panel-color: #fff !important;
   --menu-disabled-color: lightgrey !important;
   --panel-background: #000080 !important;
   --panel-border-color: #000080 !important;
   --panel-border-radius: 5px !important;
}

#placesContext [_moz-menuactive],
#toolbar-context-menu [_moz-menuactive],
#contentAreaContextMenu [_moz-menuactive],
#contentAreaContextMenu :is(menu,menuitem):hover {
   color: red !important;
   background-color: lightblue !important;
}

Alles anzeigen

Edit:

Ich habe mal etwas gebastelt hier, diese Kurzform sollte auch ausreichen:

CSS

#placesContext,
#toolbar-context-menu,
#contentAreaContextMenu {
  &, menupopup, & [_moz-menuactive], :is(menu, menuitem):hover {
   --panel-color: #fff !important;
   --menu-disabled-color: lightgrey !important;
   --panel-background: #000080 !important;
   --panel-border-color: #000080 !important;
   --panel-border-radius: 5px !important;
   color: red !important;
   background-color: lightblue !important;
  }
}

Alles anzeigen

Die Langform alleine passt nun für alles

2002Andreas

Zitat von Firefox_94.0.1

Die Langform alleine passt nun für alles

Freut mich

Firefox_94.0.1

Zitat von 2002Andreas

Zitat von Firefox_94.0.1

Die Langform alleine passt nun für alles

Freut mich

Ich habe gerade festgestellt, dass doch noch nicht alles passt:

Wenn ich das Kontextmenü öffne, wenn der Mauszeiger auf einem Tab (egal ob aktiv oder nicht) liegt, öffnet sich noch das normale Menü ohne Änderungen...

2002Andreas

Zitat von Firefox_94.0.1

auf einem Tab

Lange Version:

CSS

#tabContextMenu,
#tabContextMenu [_moz-menuactive] > menupopup,
#placesContext,
#placesContext [_moz-menuactive] > menupopup,
#toolbar-context-menu,
#toolbar-context-menu [_moz-menuactive] > menupopup,
#contentAreaContextMenu,
#contentAreaContextMenu [_moz-menuactive] > menupopup {
   --panel-color: #fff !important;
   --menu-disabled-color: lightgrey !important;
   --panel-background: #000080 !important;
   --panel-border-color: #000080 !important;
   --panel-border-radius: 5px !important;
}

#tabContextMenu [_moz-menuactive],
#placesContext [_moz-menuactive],
#toolbar-context-menu [_moz-menuactive],
#contentAreaContextMenu [_moz-menuactive],
#contentAreaContextMenu :is(menu,menuitem):hover {
   color: red !important;
   background-color: lightblue !important;
}

Alles anzeigen

Kurze Version:

CSS

#tabContextMenu,
#placesContext,
#toolbar-context-menu,
#contentAreaContextMenu {
  &, menupopup, & [_moz-menuactive], :is(menu, menuitem):hover {
   --panel-color: #fff !important;
   --menu-disabled-color: lightgrey !important;
   --panel-background: #000080 !important;
   --panel-border-color: #000080 !important;
   --panel-border-radius: 5px !important;
   color: red !important;
   background-color: lightblue !important;
  }
}

Alles anzeigen

Edit:

Wenn du das überall so haben möchtest, dann kannst du auch das mal testen:

CSS

 menupopup {
   --panel-color: #fff !important;
   --menu-disabled-color: lightgrey !important;
   --panel-background: #000080 !important;
   --panel-border-color: #000080 !important;
   --panel-border-radius: 5px !important;
}
:is(menu,menuitem):hover {
   color: red !important;
   background-color: lightblue !important;
}

Alles anzeigen

Firefox_94.0.1

Zitat von 2002Andreas

Zitat von Firefox_94.0.1

auf einem Tab

Lange Version:

CSS

#tabContextMenu,
#tabContextMenu [_moz-menuactive] > menupopup,
#placesContext,
#placesContext [_moz-menuactive] > menupopup,
#toolbar-context-menu,
#toolbar-context-menu [_moz-menuactive] > menupopup,
#contentAreaContextMenu,
#contentAreaContextMenu [_moz-menuactive] > menupopup {
   --panel-color: #fff !important;
   --menu-disabled-color: lightgrey !important;
   --panel-background: #000080 !important;
   --panel-border-color: #000080 !important;
   --panel-border-radius: 5px !important;
}

#tabContextMenu [_moz-menuactive],
#placesContext [_moz-menuactive],
#toolbar-context-menu [_moz-menuactive],
#contentAreaContextMenu [_moz-menuactive],
#contentAreaContextMenu :is(menu,menuitem):hover {
   color: red !important;
   background-color: lightblue !important;
}

Alles anzeigen

Kurze Version:

CSS

#tabContextMenu,
#placesContext,
#toolbar-context-menu,
#contentAreaContextMenu {
  &, menupopup, & [_moz-menuactive], :is(menu, menuitem):hover {
   --panel-color: #fff !important;
   --menu-disabled-color: lightgrey !important;
   --panel-background: #000080 !important;
   --panel-border-color: #000080 !important;
   --panel-border-radius: 5px !important;
   color: red !important;
   background-color: lightblue !important;
  }
}

Alles anzeigen

Edit:

Wenn du das überall so haben möchtest, dann kannst du auch das mal testen:

CSS

 menupopup {
   --panel-color: #fff !important;
   --menu-disabled-color: lightgrey !important;
   --panel-background: #000080 !important;
   --panel-border-color: #000080 !important;
   --panel-border-radius: 5px !important;
}
:is(menu,menuitem):hover {
   color: red !important;
   background-color: lightblue !important;
}

Alles anzeigen

Mir sind noch zwei Stellen aufgefallen:

- das Kontextmenü bei rechtsklich in die URL-Leiste sowie das im Suchfeld, welches man mit Strg + F öffnet.

Deinen Code für überall habe ich getestet, jedoch habe ich damit wieder das ursprüngliche Problem, dass sich das auch auf Menüs auf Webseiten auswirkt.

Wie findest du eig. die adressierung der Menüs an der genauen Stelle, um ausschl. diese anzusprechen? Mit den Browser-Werkzeugen finde ich überall nur das allgemeine "arrowscrollbox.menupopup-arrowscrollbox".

2002Andreas

Zitat von Firefox_94.0.1

Wie findest du eig.

Zitat von Firefox_94.0.1

die URL-Leiste sowie das im Suchfeld, welches man mit Strg + F öffnet

Teste bitte diesen kompl. Code wieder:

CSS

#textbox-contextmenu,
moz-input-box.urlbar-input-box > menupopup,
#tabContextMenu,
#tabContextMenu [_moz-menuactive] > menupopup,
#placesContext,
#placesContext [_moz-menuactive] > menupopup,
#toolbar-context-menu,
#toolbar-context-menu [_moz-menuactive] > menupopup,
#contentAreaContextMenu,
#contentAreaContextMenu [_moz-menuactive] > menupopup {
   --panel-color: #fff !important;
   --menu-disabled-color: lightgrey !important;
   --panel-background: #000080 !important;
   --panel-border-color: #000080 !important;
   --panel-border-radius: 5px !important;
}

#textbox-contextmenu [_moz-menuactive],
moz-input-box.urlbar-input-box > menupopup [_moz-menuactive],
#tabContextMenu [_moz-menuactive],
#placesContext [_moz-menuactive],
#toolbar-context-menu [_moz-menuactive],
#contentAreaContextMenu [_moz-menuactive],
#contentAreaContextMenu :is(menu,menuitem):hover {
   color: red !important;
   background-color: lightblue !important;
}

Alles anzeigen

Hintergrund Kontextmenü + Drop down Menüs in Menüleiste

Firefox_94.0.1 30. März 2026 um 18:28

Ähnliche Themen

Sidebar nach Update auf 146 plötzlich Blau

Symbolabstände in einigen Menüs und Kontextmenüs zu groß

FF141: Minimieren, Maximieren, Schließen einfärben funktioniert nicht mehr

Mehrzeilige Tableiste + ungelesene Tabs farbig