Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

show close button ("x") on hover over a tab withouh having it in the foreground.

more options

show close button ("x") on hover over a tab without having it in the foreground. Basically I wish to have the middle mouse click ability with a mouse which does not have said button.

Chosen solution

Possible code for userChrome.css to show the close button on hover in case it is hidden because a lot of tabs are open.

Add code to the userChrome.css file below the default @namespace line.


@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */

/* show close button on hover */
#tabbrowser-tabs[closebuttons="activetab"]
 .tabbrowser-tab:not([selected]):not([pinned]):hover .tab-close-button {
  display: -moz-inline-box !important;
}

/* make the close button more clearly visible on hover */
.tab-close-button:hover {
	background-color: rgba(255,0,0,.7) !important;
	fill: white !important;
}

It is not that difficult to create userChrome.css if you have never used it.

The first step is to open the "Help -> Troubleshooting Information" page and find the button to access the profile folder.

You can find this button under the "Application Basics" section as "Profile Folder -> Open Folder". If you click this button then you open the profile folder in the Windows File Explorer. You need to create a folder with the name chrome in this folder (name is all lowercase). In the chrome folder you need to create a plain text file with the name userChrome.css (name is case sensitive). In this userChrome.css text file you paste the text posted. On Mac you can use the TextEdit utility to create the userChrome.css file as a plain text file.

In Windows saving the file is usually the only time things get more complicated because Windows can silently add a .txt file extension and you end up with a file named userChrome.css.txt. To avoid this you need to make sure to select "All files" in the dialog to save the file in the text editor using "Save File as".

You need to close (Quit/Exit) and restart Firefox when you create or modify the userChrome.css file.

See also:

In Firefox 69 and later you need to set this pref to true on the about:config page to enable userChrome.css and userContent.css in the chrome folder.

  • toolkit.legacyUserProfileCustomizations.stylesheets = true
Read this answer in context 👍 1

All Replies (3)

more options

I don't think there is a built-in way to modify when a close button appears. Historically it is something you can add using a custom style rule in a userChrome.css file. If you haven't heard of that, it's a little bit of a project.

What do you think about using double-click to close a tab? There is a built-in option to turn that on if you want to give it a try:

(1) In a new tab, type or paste about:config in the address bar and press Enter/Return. Click the button accepting the risk.

(2) In the search box in the page, type or paste browser.tabs.closeTabByDblclick and pause while the list is filtered

(3) Double-click the preference to switch the value from false to true

More info on about:config: Configuration Editor for Firefox.

Of course, if you close a tab accidentally, assuming it wasn't the last tab in the window, you can re-open it using any of these methods:

  • press the keyboard shortcut Ctrl+Shift+T
  • right-click a remaining tab > Reopen Closed Tab
  • "3-bar" menu button > History > Recently Closed Tabs
  • (menu bar) History > Recently Closed Tabs

Helpful?

more options

Chosen Solution

Possible code for userChrome.css to show the close button on hover in case it is hidden because a lot of tabs are open.

Add code to the userChrome.css file below the default @namespace line.


@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */

/* show close button on hover */
#tabbrowser-tabs[closebuttons="activetab"]
 .tabbrowser-tab:not([selected]):not([pinned]):hover .tab-close-button {
  display: -moz-inline-box !important;
}

/* make the close button more clearly visible on hover */
.tab-close-button:hover {
	background-color: rgba(255,0,0,.7) !important;
	fill: white !important;
}

It is not that difficult to create userChrome.css if you have never used it.

The first step is to open the "Help -> Troubleshooting Information" page and find the button to access the profile folder.

You can find this button under the "Application Basics" section as "Profile Folder -> Open Folder". If you click this button then you open the profile folder in the Windows File Explorer. You need to create a folder with the name chrome in this folder (name is all lowercase). In the chrome folder you need to create a plain text file with the name userChrome.css (name is case sensitive). In this userChrome.css text file you paste the text posted. On Mac you can use the TextEdit utility to create the userChrome.css file as a plain text file.

In Windows saving the file is usually the only time things get more complicated because Windows can silently add a .txt file extension and you end up with a file named userChrome.css.txt. To avoid this you need to make sure to select "All files" in the dialog to save the file in the text editor using "Save File as".

You need to close (Quit/Exit) and restart Firefox when you create or modify the userChrome.css file.

See also:

In Firefox 69 and later you need to set this pref to true on the about:config page to enable userChrome.css and userContent.css in the chrome folder.

  • toolkit.legacyUserProfileCustomizations.stylesheets = true

Modified by cor-el

Helpful?

more options

@jscher2000 thanks for your reply. your solution seems to work only if the tab is open already, but then I could use the "x". I wasn't specific that I'm looking for a way to close the tab without a middle mouse button AND w/o having to open it. sorry for my unclear question.

@cor-el wow fantastic. That is exactly what I'd had in mind :) works perfect! thank you!!

@others looks like this:

Modified by randomnumber48499

Helpful?

Ask a question

You must log in to your account to reply to posts. Please start a new question, if you do not have an account yet.