Skip to content

Instantly share code, notes, and snippets.

@espdev
Last active February 18, 2026 07:31
Show Gist options
  • Select an option

  • Save espdev/4f1565b18497a42d317cdf2531b7ef05 to your computer and use it in GitHub Desktop.

Select an option

Save espdev/4f1565b18497a42d317cdf2531b7ef05 to your computer and use it in GitHub Desktop.
A QTabWidget Custom Stylesheet Example
QTabWidget::pane {
border: 1px solid black;
background: white;
}
QTabWidget::tab-bar:top {
top: 1px;
}
QTabWidget::tab-bar:bottom {
bottom: 1px;
}
QTabWidget::tab-bar:left {
right: 1px;
}
QTabWidget::tab-bar:right {
left: 1px;
}
QTabBar::tab {
border: 1px solid black;
}
QTabBar::tab:selected {
background: white;
}
QTabBar::tab:!selected {
background: silver;
}
QTabBar::tab:!selected:hover {
background: #999;
}
QTabBar::tab:top:!selected {
margin-top: 3px;
}
QTabBar::tab:bottom:!selected {
margin-bottom: 3px;
}
QTabBar::tab:top, QTabBar::tab:bottom {
min-width: 8ex;
margin-right: -1px;
padding: 5px 10px 5px 10px;
}
QTabBar::tab:top:selected {
border-bottom-color: none;
}
QTabBar::tab:bottom:selected {
border-top-color: none;
}
QTabBar::tab:top:last, QTabBar::tab:bottom:last,
QTabBar::tab:top:only-one, QTabBar::tab:bottom:only-one {
margin-right: 0;
}
QTabBar::tab:left:!selected {
margin-right: 3px;
}
QTabBar::tab:right:!selected {
margin-left: 3px;
}
QTabBar::tab:left, QTabBar::tab:right {
min-height: 8ex;
margin-bottom: -1px;
padding: 10px 5px 10px 5px;
}
QTabBar::tab:left:selected {
border-left-color: none;
}
QTabBar::tab:right:selected {
border-right-color: none;
}
QTabBar::tab:left:last, QTabBar::tab:right:last,
QTabBar::tab:left:only-one, QTabBar::tab:right:only-one {
margin-bottom: 0;
}
@yasinbakhtiar

Copy link
Copy Markdown

This is a good style

@espdev

espdev commented Jun 4, 2020

Copy link
Copy Markdown
Author

@yasinbakhtiar

I have checked the stylesheet in Qt 5.13. "West" and "East" tab positions look incorrectly now. It seems, previously it worked correctly. :)

@llls31

llls31 commented Nov 12, 2021

Copy link
Copy Markdown

Hi do you have a css style for qlistwidget

@espdev

espdev commented Nov 12, 2021

Copy link
Copy Markdown
Author

Hi @llls31,

I didn't have a style for QListWidget. QListWidget is just a rectangle with list items. Usually list items are styled by widget item delegate.
You can check supported style options for QListView/QListWidget here: https://doc.qt.io/qt-5/stylesheet-reference.html

@xenjee

xenjee commented May 4, 2022

Copy link
Copy Markdown

Quite a helpful list of sub elements, thank you!

@DamaMichaelYohanna

Copy link
Copy Markdown

Thank you so much man. This has really helped me. currently Pyside.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment