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

How do I hide the close X on all tabs (including the active tab)?

  • 16 replies
  • 1 has this problem
  • 13 views
  • Paskiausią atsakymą parašė ender21

more options

Currently, the X doesn't show on tabs other than the active tab. Ideally, I don't want the X on the active tab either. The stanza I am using in userChrome.css is

.tab-close-button{ display: none !important } (suggested in a post in GitHub) This is the current stanza and doesn't hide the X on the active tab.

I have tried setting the value of browser.tabs.tabClipWidth to 9999 as suggested in another question and that doesn't get rid of the X on the active tab. I have also tried the following css solution :

#tabbrowser-tabs .tabbrowser-tab .tab-close-button { display:none!important; }
(also suggested in another question but it doesn't hide the X on the active tab)

I searched for an extension and got a lot of links; I looked through the first three pages and nothing relevant was listed.

Currently, the X doesn't show on tabs other than the active tab. Ideally, I don't want the X on the active tab either. The stanza I am using in userChrome.css is <pre>.tab-close-button{ display: none !important } (suggested in a post in GitHub) This is the current stanza and doesn't hide the X on the active tab.</pre> I have tried setting the value of browser.tabs.tabClipWidth to 9999 as suggested in another question and that doesn't get rid of the X on the active tab. I have also tried the following css solution : <pre>#tabbrowser-tabs .tabbrowser-tab .tab-close-button { display:none!important; }</pre> (also suggested in another question but it doesn't hide the X on the active tab) I searched for an extension and got a lot of links; I looked through the first three pages and nothing relevant was listed.

Modified by ender21

Chosen solution

What worked is using two stanzas together, thus :

#tabbrowser-tabs .tabbrowser-tab .tab-close-button {display:none !important}
#tabbrowser-tabs > .tabbrowser-tab > .tab-stack > .tab-content > .tab-close-button {
  display: none !important;}

I also tried using the second stanza alone; that didn't work.

Skaityti atsakymą kartu su kontekstu 👍 0

All Replies (16)

more options

For css usage you should contact the site that created the css your using for how they configure changes from the default FF settings.

more options

That code should work.

Are you sure that there isn't a problem with the userChrome.css file you created?


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 */

#tabbrowser-tabs .tabbrowser-tab .tab-close-button {display:none!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 text file with the name userChrome.css (name is case sensitive). In this userChrome.css text file you paste the text posted.

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". Check that the file doesn't have a double .css file extension (userChrome.css.css).

You need to close and restart Firefox when you create or modify the userChrome.css file.

more options

Thanks for the replies. I know how to create a userChrome.css file. I have been using one for years. It doesn't have a double .css extension. I restarted after trying each option.

more options

I have just re-added the following stanza (and commented out the other) after exiting Firefox then restarted Firefox. The X is still on the active tab.

more options

Does other code in the file work?

Firefox would normally hide the close X on other tabs in case a lot of tabs are open, so may test this with only two of three tabs open.


Can you attach a screenshot that shows this file?

more options

Thanks for replying. Most of the code in the file works. There are two stanzas relating to the colours of tabs which don't work as expected.

I currently have 20 tabs open. I suppose you don't want a screen shot of the width of the screen so my screen shot shows only the active tab and two tabs on either side.

more options

Somewhere in a built-in style sheet for Windows, I found a rule that had a more detailed (more specific) chain, so I have been using this to modify the tab close button. You could try it with your display:none preference:

#tabbrowser-tabs > .tabbrowser-tab > .tab-stack > .tab-content > .tab-close-button {
  display: none !important;
}

Please do not trust email confirmations with CSS, always copy from the forum. Especially because we sometimes notice a typo and fix it here, but no new email is generated.

more options

jscher2000 said

Somewhere in a built-in style sheet for Windows, I found a rule that had a more detailed (more specific) chain, so I have been using this to modify the tab close button. You could try it with your display:none preference:
#tabbrowser-tabs > .tabbrowser-tab > .tab-stack > .tab-content > .tab-close-button {
  display: none !important;
}

Please do not trust email confirmations with CSS, always copy from the forum. Especially because we sometimes notice a typo and fix it here, but no new email is generated.

Thanks. I have copied that code. What do you mean by "with your display:none preference"? Is your code to be used along with the following?

#tabbrowser-tabs .tabbrowser-tab .tab-close-button {display:none!important}

I have just noticed that there is no space between 'none' and'!' I'll fix that and restart. No, adding a space made no difference.

Modified by ender21

more options

Try using a space between none and !important

none !important

#tabbrowser-tabs .tabbrowser-tab .tab-close-button 
{display:none !important} 
more options

the-edmeister said

Try using a space between none and !important none !important
#tabbrowser-tabs .tabbrowser-tab .tab-close-button 
{display:none !important} 

Thanks. I made that change earlier (after exiting Firefox) and restarted Firefox. The change made no difference.

more options

ender21 said

jscher2000 said
#tabbrowser-tabs > .tabbrowser-tab > .tab-stack > .tab-content > .tab-close-button {
  display: none !important;
}
Thanks. I have copied that code. What do you mean by "with your display:none preference"? Is your code to be used along with the following?

No additional rules needed. What I posted is a complete solution for hiding all tab close buttons, tested on Firefox 61 on Windows 7.

more options

Chosen Solution

What worked is using two stanzas together, thus :

#tabbrowser-tabs .tabbrowser-tab .tab-close-button {display:none !important}
#tabbrowser-tabs > .tabbrowser-tab > .tab-stack > .tab-content > .tab-close-button {
  display: none !important;}

I also tried using the second stanza alone; that didn't work.

Modified by ender21

more options

Use <pre> before and </pre> after code blocks.

For some reason, there is a closing } missing after the second rule.

more options

jscher2000 said

Use <pre> before and </pre> after code blocks. For some reason, there is a closing } missing after the second rule.

Thanks. Edited accordingly.

more options

It is not necessary to leave a space before and after the "!", it should work either way. The Firefox source code use these spaces to make it easier to spot the important flag (display: none ! important;)

Did you test the code with only two or three tabs open like I suggested above?

more options

cor-el said

It is not necessary to leave a space before and after the "!", it should work either way. The Firefox source code use these spaces to make it easier to spot the important flag (display: none ! important;) Did you test the code with only two or three tabs open like I suggested above?

Thanks. I didn't test the code with only two or three tabs open. Is there any need for that now that I have code that works? I always save the session when exiting so I would have to close tabs I want to save.