1

I have a Qt application that, among many other widget types, uses a QTabWidget. I'm having difficulty styling the background color for this object.

I've tried some of the following lines, which I found from other forum posts, in my stylesheet with no effect on the program

QTabWidget { background-color: black; }
QTabWidget::pane { background-color: black; }
QTabWidget#tabWidget { background-color: black; }
QTabWidget#tabWidget::pane { background-color: black; }

If I use QWidget { background-color: black; }, then yes my color is properly changed, but then all of the other widgets in my program are changed as well... so this isn't what I'm looking for...

I've also tried it in code with ui->tabWidget->setStyleSheet("background-color: black"); But this too is undesirable because it changes the background color of all of its children widgets.

Does anyone have any other ideas on how to style a QTabWidgets contents background area?

Stanton
  • 904
  • 10
  • 25
  • This may be of use to your question since it shows how to change the background color of a QTabWidget [Qt Style Sheet with Tab Widget](http://qt-project.org/doc/qt-5.1/qtwidgets/stylesheet-examples.html#customizing-qtabwidget-and-qtabbar) – Error - Syntactical Remorse Aug 26 '17 at 20:02
  • There is probably a bug here, I'm having the same issues in pyqt5. I can't change the background of the tab pages (not the tab bar) or it's poorly documented so we can't find it. – Saelyth Apr 15 '18 at 03:41

1 Answers1

9

About a year late but I recently ran into the same problem and got it working.

First of all QTabWidget has a child QWidget for every tab you make. That is the area that you put your other widgets into, and that is what you want to set the background color of.

Set the style-sheet by doing this.

1)Determine the name of your tab widgets from the design object window top right, they should match the currentTabName that you set when creating your tab.

2)Realize this is a QWidget not a QTabWidget this is why QTabWidget { background-color: black; } does not work.

3)Realize that by specifying the object in the style-sheet with the '#' the child object will not inherit the style-sheet.

For me I specified my style-sheet as such, repeating for each tab object name that I had:

#objectName {background-color: rgb(240,240,240);}

This provided me with the exact behavior I needed. In my case I wanted to get the natural gray background onto my Tab pages but not override the child components on the tab pages.

I hope this helps someone in the future...

MrShawn
  • 93
  • 1
  • 3
  • Helped it did, even after many years. It's surprising to see that Qt does not clarify this in the docs... – Bart M May 17 '21 at 17:58