Hide specific drop-marker but keep drop down functionality using CSS
Im trying to customize an add-in toolbar menu icon using user.chrome. I was able to do it in a very complicated way. Wondering if there is a cleaner way to do this.
The button is a drop down list and what I am trying to do is remove the drop-down marker from this icon ONLY and not all markers, but keep the functionality of the marker. I found the button and marker in DOM inspector but was not initially able to turn off just the drop marker. I eventually changed the icon from toolbarbutton type "menu" to "menu-button" which separated the button and the marker. The problem was if I now hid the marker the button has no events associated with it (they are in the hidden marker).
I came up with this mess below and was wondering if there is a better way to do it.
/*Hide the real icon*/
- addin-button toolbarbutton { visibility:collapse !important;}
/*Change the drop marker icon to match the hidden icon */
- addin-button .toolbarbutton-menubutton-dropmarker .dropmarker-icon {list-style-image: url(data:image/png;base64,iBLA-BLA-BLA) !important; width: 100% !important; -moz-image-region: rect(0, 0, 0, 0) !important;}
All Replies (5)
This is confusing... how do you hide the drop-menu marker button AND keep its functionality?
I'm attaching an image associated with the Greasemonkey button as an example. Is that the same structure your target extension button pair has?
You could try something like this but it's annoying:
/* Hide the Greasemonkey button drop marker */
#greasemonkey-tbb > .toolbarbutton-menubutton-dropmarker {
display: none !important;
}
/* Show the Greasemonkey button drop marker when hovering
Causes ANNOYING shift!! */
#greasemonkey-tbb:hover > .toolbarbutton-menubutton-dropmarker {
display: -moz-box !important;
}
Or do you mean you want to hide the button part and replace the icon on the dropmarker with the icon of the button? Sorry, I'm out of time to experiment but maybe this will move the ball forward:
/* Hide the Greasemonkey button */
#greasemonkey-tbb > .toolbarbutton-menubutton-button {
display: none !important;
}
/* Replace the icon of the Greasemonkey dropmarker */
#greasemonkey-tbb > .toolbarbutton-menubutton-dropmarker .dropmarker-icon {
list-style-image: url("chrome://greasemonkey/skin/icon16.png") !important;
padding-top: 2px !important;
padding-bottom: 2px !important;
border-left: none !important;
}
/* Get rid of divider */
/* TBD! */
Oh, your Firefox identified itself to the forum as version 40. An update is available: this article describes how to get Firefox 52 ESR (Extended Support Release) if you're on XP: Firefox has ended support for Windows XP and Vista.
If something is holding you back from upgrading to Firefox 52, please let us know so we can suggest solutions or workarounds. Version 40 is not secure; Mozilla discloses security flaws after each new release.
Sometimes Firefox reports the wrong version because that information was saved in a preferences file. If you have Firefox 52.0esr or 52.1.0esr, you may need to clear out that incorrect information. See: How to reset the default user agent on Firefox.
It is a weird user agent with rv:27.0 and Firefox 40.0 These two would normally match. Is this a fake user agent or do you have a general.useragent.override pref (about:config)?
- Mozilla/5.0 (Windows NT 5.1; rv:27.0) Gecko/20100101 Firefox/40.0
Thanks for your help. That is pretty much what I was doing but I think your code is cleaner :-)
(also posted here: http://forums.mozillazine.org/viewtopic.php?f=38&t=3029686)