This site will have limited functionality while we undergo maintenance to improve your experience. If an article doesn't solve your issue and you want to ask a question, we have our support community waiting to help you at @FirefoxSupport on Twitter and/r/firefox on Reddit.

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

No "x" button when multiple tabs open

  • 7 iimpendulo
  • 0 inale ngxaki
  • 8 views
  • Impendulo yokugqibela ngu campsall

more options

With multiple tabs open, the "X" close button disappears; in Safari, the "X" appears on hovering, not in FF, so I have to open the tab to close it. It's an annoyance

With multiple tabs open, the "X" close button disappears; in Safari, the "X" appears on hovering, not in FF, so I have to open the tab to close it. It's an annoyance

All Replies (7)

more options

You can middle-click a tab with the mouse wheel to close this tab or use the context menu.

There are these two tab*(width|clip) prefs that control the minimum tab width and whether to show the close button, you can possibly set tabClipWidth to 49 (less than tabMinWidth) to always see the close button.


See updateCloseButtons:

Check if tab widths are below the threshold where we want to
remove close buttons from background tabs so that people don't
accidentally close tabs by selecting them.

Ilungisiwe ngu cor-el

more options

Thanks - that was very helpful. I wonder, like Safari does, wouldn't it be easier to have the close "X" appear on a pointer hover within the tab?

more options

Also - on my MacBook, there is no middle mouse button and to use the context menu is too much trouble. I think the hover "x" as used by Safari would be a good way to go.

Steve

more options

You can use userChrome.css to have the close X appear if you hover a tab and hide the close X by default to see as much as possible of the label, I'm using this as well.

A recent thread where this was discussed.


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 with the random name (xxxxxxxx.default-release).

You can find the button to go to the profile folder 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 the profile folder with the random name (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.

More info about userChrome.css/userContent.css in case you are not familiar: *https://www.userchrome.org/what-is-userchrome-css.html

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.

more options

Thanks so much for that information and clear explanation. It was very kind of you to take the time to help.

Steve

more options

You're welcome.

I use this CSS code to make the close buttons appear with a delay to avoid closing the tab by selecting it.


 /* TAB: close button size and padding */
.tab-close-button {
  padding: 2px !important;
  width: 16px !important;
}

/* TAB: close button colors on hover */
.tab-close-button:hover {
  background-color: rgba(255,0,0,.7) !important;
  fill: white !important;
}

.tabbrowser-tab:not([pinned]) .tab-close-button {
  display: -moz-inline-box !important;
}

.tabbrowser-tab:not([pinned]) .tab-close-button {
  max-width: 0 !important;
  transition: all 100ms ease-in-out 100ms;
}

/*show close button on hover */
 .tabbrowser-tab:not([pinned]):hover .tab-close-button {
  max-width: 20px !important;
  transition: all 250ms ease-in-out 800ms;
}

more options

It is certainly a very flexible browser. Thank you, again!

Steve