2008-07-29

Firefox 選單背景

之前使用這樣一段 CSS code 來改變選單背景,

menupopup, popup {
background-image:url("fx_popup.jpg") !important;
background-position:left top !important;
background-repeat:no-repeat !important;
background-attachment:scroll !important;
}
menupopup>menu[_moz-menuactive="true"], menupopup>menuitem[_moz-menuactive="true"],
popup>menu[_moz-menuactive="true"], popup>menuitem[_moz-menuactive="true"] {
background-color:#000 !important;
color:#fff !important;
}

不過到了 3.0 版好像失效了,因為 WinXP 中沒有效果,而 Win2K 下有效果,多方詢問終於有了解答,「由於 XP 以後,以及 Linux 都有自己的主題風格,Firefox 會引用 OS 的風格,所以 CSS 對於 OS 物件無效, 您可以加入 -moz-appearance:none; 告訴 Firefox 不要使用 OS 風格。

感謝來自 Racklin's 阿土伯程式大觀園的協助。
詳細資料 http://developer.mozilla.org/en/docs/CSS:-moz-appearance

以下是比較完整的寫法:

popup:not(#autoscroller), menupopup {
background-image:url("chrome://fxtools/skin/fx_popup.jpg") !important;
background-color:#fff !important;
background-position:center center !important;
background-repeat:no-repeat !important;
background-attachment:scroll !important;
color:#000 !important;
-moz-appearance:none;
}
menubar > menu, menupopup > menu, popup > menu, menuitem,
toolbarbutton, popup:not(#autoscroller) {
color:#000 !important;
}
#contentAreaContextMenu menuitem[disabled="true"],
#contentAreaContextMenu menuitem[disabled="true"] + menuseparator,
menuitem[disabled="true"] {
color:#aaa !important;
}
menupopup>menu[_moz-menuactive="true"], menupopup>menuitem[_moz-menuactive="true"],
popup>menu[_moz-menuactive="true"], popup>menuitem[_moz-menuactive="true"] {
background-color:#000 !important;
color:#fff !important;
}

0 意見: