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.

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;}

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.

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: [[Important - Firefox is ending 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 [https://www.mozilla.org/security/known-vulnerabilities/firefox.html 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

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 (<b>about:config</b>)?
*Mozilla/5.0 (Windows NT 5.1; rv:27.0) Gecko/20100101 Firefox/40.0