How can I style a QTabWidget without affecting the tabs/widgets inside?

2
votes

I have a QTabWidget with two tabs inside. I want to set the background of both tabs to be transparent to see the color of the main window underneath, but when I set 

QTabWidget *tabWidget = new QTabWidget(this);
tabWidget-setStyleSheet("background-color: transparent;");

it makes all the background of the widgets I have inside the tabs transparent, not the tab itself.

Album showing before stylesheet change:

enter image description here

after change,

enter image description here

and what I'm trying to achieve.

enter image description here

I can provide more code if needed. Thanks in advance!

1
c++cssqtqt5

1 Answers

1
votes

Stylesheets are applied to touched widgets and all its children.

Currently your style definitions 

QTabWidget *tabWidget = new QTabWidget(this);
tabWidget-setStyleSheet("background-color: transparent;");

says something like "Set background color for all widgets to transparent".

... but you can restrict stylesheet applicability.

E.g. you can say, that style definitions should be applied only to instances of certain classes like QLabel:

QTabWidget *tabWidget = new QTabWidget(this);
tabWidget-setStyleSheet("QLabel{ background-color: transparent; }");

There are even more possibilietes to define applicability in more details: The Qt Style Sheet Syntax, Selector Types

Relevant for your case is the possibility to restrict the applicability of style definitions to objects with certain name:

QTabWidget *tabWidget = new QTabWidget(this);
tabWidget-setStyleSheet("QWidget#custom_tab, QWidget#templates_tab{"
                        "    background-color: transparent;        "
                        "}");

You must make sure, that object names match (here: 'custom_tab' and 'templates_tab'.