X
點擊此處開啟此網站的行動版。

技術支援討論區

change new tab button color

已張貼

I want to change the "+" color on the new tab icon

I was able to do this for the close tab "X' icon with the following css code in my userChrome.css file.

.tabbrowser-tab .close-icon:hover {

  fill: white !important;
  background-color: red !important;
  border-radius: 4px;
}

I think this code should work for the new tab icon, however I don't know the name of the new tab icon.

Please help,

Thank you

I want to change the "+" color on the new tab icon I was able to do this for the close tab "X' icon with the following css code in my userChrome.css file. .tabbrowser-tab .close-icon:hover { fill: white !important; background-color: red !important; border-radius: 4px; } I think this code should work for the new tab icon, however I don't know the name of the new tab icon. Please help, Thank you

被選擇的解決方法

Its selector is:

.tabs-newtab-button{
  fill:red !important;
}

.tabs-newtab-button:hover{
  fill: white !important;
  background-color: rgba(255, 0, 0, 0.8) !important;
  border-radius: 4px;
}

I tested it in the Browser Toolbox and in userChrome.css and it works for me.

從原來的回覆中察看解決方案 0
引用
Wesley Branton
  • Top 10 Contributor
592 個解決方法 5013 個答案

The new tab button CSS selector is:

.tabs-newtab-button {
     /* YOUR CSS RULES */
}

For future reference, if you open chrome://browser/content/browser.xul in Firefox, you can see the layout of the browser and use the developer tools to navigate through the hierarchy to find IDs and classes of elements that you want to modify.

Hope this helps.

The new tab button CSS selector is: <pre><nowiki>.tabs-newtab-button { /* YOUR CSS RULES */ }</nowiki></pre> For future reference, if you open <code>chrome://browser/content/browser.xul</code> in Firefox, you can see the layout of the browser and use the developer tools to navigate through the hierarchy to find IDs and classes of elements that you want to modify. Hope this helps.
這篇文章有幫助嗎?
引用
cor-el
  • Top 10 Contributor
  • Moderator
17473 個解決方法 157934 個答案

選擇的解決方法

Its selector is:

.tabs-newtab-button{
  fill:red !important;
}

.tabs-newtab-button:hover{
  fill: white !important;
  background-color: rgba(255, 0, 0, 0.8) !important;
  border-radius: 4px;
}

I tested it in the Browser Toolbox and in userChrome.css and it works for me.

Its selector is: <pre><nowiki>.tabs-newtab-button{ fill:red !important; } .tabs-newtab-button:hover{ fill: white !important; background-color: rgba(255, 0, 0, 0.8) !important; border-radius: 4px; } </nowiki></pre> I tested it in the Browser Toolbox and in userChrome.css and it works for me. *https://developer.mozilla.org/en-US/Tools/Browser_Toolbox

由 cor-el 於 修改

這篇文章有幫助嗎?
引用

提出問題者

Thank you!

Regards,

D.M. De Haven

Thank you! Regards, D.M. De Haven
這篇文章有幫助嗎?
引用
問個問題

如果您還沒有帳號,您必須先 登入您的帳號 來回覆文章。請 開始一個新問題