How to Make Firefox Tab Auto Show Close Button

In Firefox, the close button of a tab is hidden by default. You have to click the tab to show the close button. This is not convenient for me. I want the close button to be visible when i hover on it. Here is how to do it.

Activate firefox css

1. Open Firefox and type about:config in the address bar and enter it.
2. Search for toolkit.legacyUserProfileCustomizations.stylesheets and set it to true.
3. type about:profiles in the address and select default user’s root directory.
4. Create a folder named chrome in the root directory.
5. Create a file named userChrome.css in the chrome folder.

Add css

Add the following css to the userChrome.css file.

/* Hide the tab-close button until hover */
.tabbrowser-tab:not(\[pinned\]):not(:hover) .tab-close-button {
    visibility: collapse !important;
}

.tabbrowser-tab:not(\[pinned\]):hover .tab-close-button {
    visibility: visible !important;
    display: block !important;
}

Restart firefox

just restart firefox and you will see the close button of a tab is visible when you hover on it.