ricky
ricky

Reputation: 2108

In Qt, how to customize a QTabWidget as below via qss?

I'm trying to customize a QTabWidget as below. But I don't know how to show the line marked by red color as below in qss.

enter image description here

Upvotes: 5

Views: 863

Answers (1)

p-a-o-l-o
p-a-o-l-o

Reputation: 10079

You have to style two different subcontrols of QTabWidget: pane and tab-bar.

Give pane a top border and a negative top:

QTabWidget::pane{
  border-top: 1px solid red;
  margin-top: -1px;
}

Now the selected tab of the tab-bar:

QTabBar::tab:selected{
  border-top: 1px solid red;
  border-left: 1px solid red;
  border-right: 1px solid red;
  background-color: rgb(240, 240, 240);
}

Please note that the selected tab can not have transparent background, otherwise the pane top border will show up behind it (here I provided a light gray background, just as an example).

Upvotes: 3

Related Questions