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

4
votes

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

1
qtqtstylesheetsqtabwidget
As background image – Dmitry Sazonov

1 Answers

2
votes

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).