- Firefox Combine Tab Icon and Tab Close Button

For Firefox 3.6+ and up to the latest Firefox Beta, Aurora, Nightly builds.

This style adds the following features:

1) Moves the "x"(tab close button) to the left of the tab.
2) Keeps the tab favicon on the left side of the tab and only makes "x"(tab close button) appear when you hover over the tab with your mouse cursor(otherwise "x"(tab close button) would be hidden under the tab favicon).

***!Important!***(If you experience style incompatibility with [Ext] Tab Mix Plus just make sure TMP Options settings: Display > Tab > Show on Tab, "Close tab button" -> "on all" and "Place on left side" is selected)

Tested on Firefox 3.6+ and up to the latest Firefox Beta, Aurora, Nightly builds.

Modified code from Userstyles:

GrApple themes – combined tab icon & close button

Firefox 4, tab close button/favicon reversed (Mac)

To customize or fix Firefox Beta, Aurora, and Nightly builds, you can also have a look at my other styles: rob64rock

To use this style, install Firefox and Stylish. If you already have Stylish, make sure this site is allowed to run JavaScript.

Firefox Combine Tab Icon and Tab Close Button
Author rob64rock
License CC BY-SA
Created Feb 10, 2011
Updated Sep 13, 2011
Installs (this week) 9
Installs (total) 3,927
Show CSS


Updated 09-13-2011
Did some CSS code cleanup and fixed some issues with [Ext] Tab Mix Plus Lock, Protect, Auto Reload Icons on Tabs and the issue of the 'Close Tab button' not always appearing when tab is hovered.(Configuring [Ext] Tab Mix Plus settings may not be required for TMP to be compatible with this style anymore.)

Updated 02-12-2011
Updated to fixed some problems with APP Tabs(Pinned tabs) and Tab Mix Plus extension and the Tab throbber and Tab title text.

This style isn't compatible with extensions:
"Progress Bar on Tab"
"Informational Tab"
"Tree Style Tab"

Under Mac OS X, the tab text may move on hover, if so try changing the 3px into 0px on this part of code:

/* display close tab button on tab hover */
.tabbrowser-tab:not([pinned]):hover .tab-close-button {
visibility: visible !important; margin-right:3px !important;
.tabbrowser-tab:not([pinned]):hover .tab-close-button {
display: -moz-box !important; margin-right:3px !important;
.tabbrowser-tab:not([pinned]):hover .tab-close-button.always-left {
display: -moz-box !important; margin-right:3px !important;



No discussions posted in the last year. See older discussions. Ask a new question or add a review for this style.