Как поменять stylesheet у одной ячейки qt

Как через CSS изменить толщину границ ячеек в таблице QTableView?

Здравствуйте. Использую программу от сименса (WinCC OA), которая построена на Qt. Напрямую, с библиотекой Qt в ней работать нельзя, но можно изменять отображение графических объектов, используя CSS.
Мне нужно изменить толщину границ ячеек (линий между ячейками). Как менять цвет границ ячеек, я нашёл, а вот, как менять толщину — нигде не могу найти.
Также я нашёл, как менять ширину внешней границы таблицы, но вот как менять ширину границ ячеек!?

94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:

Как с использованием CSS изменить выравнивание текста в заголовках таблиц QTableView?
Использую программу от сименса (WinCC OA), которая построена на Qt. Напрямую, с библиотекой Qt в.

Изменить ширину ячеек одной таблицы, в зависимости от соответствующих ячеек в другой таблице
День добрый. Необходимо изменять ширину ячеек одной таблицы, в зависимости от соответствующих.

Как изменить толщину текста?
Есть ли какие-то функции для задания толщины текста ? Удалось поменять только цвет через.

Как изменить толщину линии?
uses graphABC; var a,b,h,xc,yc,x1,y1,x2,y2,x3,y3,x4,y4,x5,y5:integer; x,m,u,u1,r:real; .

Регистрация: 25.10.2012
Сообщений: 87
Пока нашёл такое решение:

1 2 3 4 5 6 7 8

QTableWidget::item { border: 5px solid #CCCCCC; } QTableWidget::item { border-right: 5px solid #CCCCCC; border-radius: 10px; }

Не решенные how to set tableview horizontal header different stylesheet in qt creator

Hi all ,
I want change different stylesheet for each header, how to do this ? I taken qtableView,

JonB @learn_Qt отредактировано
@learn_Qt
I don’t believe Qt stylesheet lets you address individual columns/cells.

Axel Spoerl отредактировано

@JonB is right (as usual). You can set different stylesheets for normal and focus items, but not for each individual item. You could craft that into a custom item model.

Software Engineer
The Qt Company, Oslo
learn_Qt @Axel Spoerl отредактировано learn_Qt
thanks @JonB and @Axel-Spoerl , what is the way do custom item model. example plz .

JonB @learn_Qt отредактировано

@learn_Qt
Assuming you wish to make individual columns look different from one another. Override the QAbstractItemModel::data() and/or QAbstractItemModel::headerData() methods in your derived model class to produce varying appearance roles on a per column basis. Potentially see also QHeaderView or QStyledItemDelegate depending on your requirements.

learn_Qt @JonB отредактировано

@JonB
thanks for reply, actually I’m looking for my tableview header (Only horizontal header) has different background color as u can in pic.

SGaist Lifetime Qt Champion отредактировано

Hi, You can re-implement the headerData method to return that information.
You will likely have to use a custom QHeaderView in order to make use of the custom color.

learn_Qt @SGaist отредактировано
@SGaist
thanks replay , could you please elaborate a bit more.
Bonnie @learn_Qt отредактировано Bonnie

@learn_Qt What kind of item model are you using to display your tableview?
I think you should override headerData() as @JonB said.

learn_Qt @Bonnie отредактировано
@Bonnie , I’m using tableview.

jsulm Lifetime Qt Champion @learn_Qt отредактировано
@learn_Qt The question was what model you’re using for your view.
learn_Qt @jsulm отредактировано learn_Qt
@jsulm QStandardItemModel QStandardItemModel *modelTableView = new QStandardItemModel();
Bonnie @learn_Qt отредактировано Bonnie

@learn_Qt If you are using QStandardItemModel , then your headers should be QStandardItem s, right?
You should be able to call QStandardItem::setBackground() on them to set the background color for each one. [Added]: I found there’s something related to the style. The windows style seems to ignore the background role returned by the headerData() (which will return the color set by setBackground() in this case).
So if you are on Windows you’ll need to either switch style to fushion (which is much more simple as my example code below), or write your own custom proxy style.

//change the style of the whole tableview ui->tableView->setStyle(QStyleFactory::create("fusion")); 

//only change the style of the headerviews auto fusion = QStyleFactory::create("fusion"); ui->tableView->horizontalHeader()->setStyle(fusion); ui->tableView->verticalHeader()->setStyle(fusion); 

learn_Qt @Bonnie отредактировано learn_Qt

@Bonnie thank for reply
I’m shearing my code snippet thought code I got above 1st posted pic result. could let me know what to do for 2nd posted result.

QStandardItemModel *mode = new QStandardItemModel(); //number of column mode->setColumnCount(12); //number of row mode->setRowCount(12); QString styleSheet = "::section "; ui->tableView->horizontalHeader()->setStyleSheet(styleSheet); ui->tableView->verticalHeader()->setVisible(false); ui->tableView->horizontalHeader()->setSectionResizeMode(QHeaderView::Stretch); mode->setHeaderData(0, Qt::Horizontal, ("1")); mode->setHeaderData(1, Qt::Horizontal, ("2")); mode->setHeaderData(2, Qt::Horizontal, ("3")); mode->setHeaderData(3, Qt::Horizontal, ("4")); mode->setHeaderData(4, Qt::Horizontal, ("5")); mode->setHeaderData(5, Qt::Horizontal, ("6")); mode->setHeaderData(6, Qt::Horizontal, ("7")); mode->setHeaderData(7, Qt::Horizontal, ("8")); for(int i = 0; i < MAX_ROW_COUNT; i++) < for(int j = 0; j < MAX_COLUMN_COUNT; j++) < mode->setData(mode->index(i, j), " "); mode->setData(mode->index(i, j), Qt::AlignCenter, Qt::TextAlignmentRole); mode->setData(mode->index(i, j), QFont("Arial", 10, QFont::Bold), Qt::FontRole); > > 

Bonnie @learn_Qt отредактировано Bonnie

@learn_Qt Unfortunately my solution is conflict with stylesheet, as far as I can see, you can’t have different header bgcolors if you use stylesheet to set the header bg/border.
So If you remove these 3 lines from your style sheet
«background-color: white;»
«border-radius: 20px;»
«border: 3px solid #498fd0;»
Then you could have colorful headers by adding the below code:

mode->setHeaderData(0, Qt::Horizontal, QColor("red"), Qt::BackgroundRole); mode->setHeaderData(1, Qt::Horizontal, QColor("green"), Qt::BackgroundRole); mode->setHeaderData(2, Qt::Horizontal, QColor("blue"), Qt::BackgroundRole); auto headerStyle = ui->tableView->horizontalHeader()->style(); if(headerStyle->inherits("QWindowsStyle")) < headerStyle = QStyleFactory::create("fusion"); headerStyle->setParent(this); ui->tableView->horizontalHeader()->setStyle(headerStyle); > 

JonB @learn_Qt отредактировано JonB

@learn_Qt
As @Bonnie has said, your stylesheet was not just setting border, it was setting colors too. Qt always makes stylesheet rules override coded styles. I don’t know whether @Bonnie tried it, but you might be able to keep your border non-color stuff:

 "border-radius: 20px;" "border: 3px solid;" 

Try his first to make sure that works, then see whether you could add in above without losing your color stuff.

learn_Qt @Bonnie отредактировано

@Bonnie thanks reply, It’s code snippet working. But how can we add background-color, border-radius, border into header in that.

JonB @learn_Qt отредактировано

@learn_Qt
Did you even try adding back in, say, the «border-radius: 20px;» I suggested you try? Or not?

Bonnie @learn_Qt отредактировано

@learn_Qt I already said: as far as I can see, you can’t.
If you have less than three columns, you can set them individually by :first , :middle , :last pseudo states in stylesheet. But if more, there seems nothing can help.

Qt Style Sheets Examples

Let’s start by setting yellow as the background color of all QLineEdits in an application. This could be achieved like this:

qApp->setStyleSheet("QLineEdit < background-color: yellow >");

If we want the property to apply only to the QLineEdits that are children (or grandchildren or grand-grandchildren) of a specific dialog, we would rather do this:

myDialog->setStyleSheet("QLineEdit < background-color: yellow >");

If we want the property to apply only to one specific QLineEdit, we can give it a name using QObject::setObjectName() and use an ID Selector to refer to it:

myDialog->setStyleSheet("QLineEdit#nameEdit < background-color: yellow >");

Alternatively, we can set the background-color property directly on the QLineEdit, omitting the selector:

nameEdit->setStyleSheet("background-color: yellow");

To ensure a good contrast, we should also specify a suitable color for the text:

nameEdit->setStyleSheet("color: blue; background-color: yellow");

It might be a good idea to change the colors used for selected text as well:

nameEdit->setStyleSheet("color: blue;" "background-color: yellow;" "selection-color: yellow;" "selection-background-color: blue;");

Customizing Using Dynamic Properties

There are many situations where we need to present a form that has mandatory fields. To indicate to the user that the field is mandatory, one effective (albeit esthetically dubious) solution is to use yellow as the background color for those fields. It turns out this is very easy to implement using Qt Style Sheets. First, we would use the following application-wide style sheet:

*[mandatoryField="true"] < background-color: yellow >

This means that every widget whose mandatoryField Qt property is set to true would have a yellow background. Then, for each mandatory field widget, we would simply create a mandatoryField property on the fly and set it to true. For example:

QLineEdit *nameEdit = new QLineEdit(this); nameEdit->setProperty("mandatoryField", true); QLineEdit *emailEdit = new QLineEdit(this); emailEdit->setProperty("mandatoryField", true); QSpinBox *ageSpinBox = new QSpinBox(this); ageSpinBox->setProperty("mandatoryField", true);

Customizing a QPushButton Using the Box Model

This time, we will show how to create a red QPushButton. This QPushButton would presumably be connected to a very destructive piece of code. First, we are tempted to use this style sheet:

QPushButton#evilButton

However, the result is a boring, flat button with no borders: What happened is this:

• We have made a request that cannot be satisfied using the native styles alone (e.g., the Windows Vista theme engine doesn’t let us specify the background color of a button).
• Therefore, the button is rendered using style sheets.
• We haven’t specified any values for border-width and border-style, so by default we obtain a 0-pixel wide border of style none .

Let’s improve the situation by specifying a border:

QPushButton#evilButton background-color: red; border-style: outset; border-width: 2px; border-color: beige; >

Things look already a lot better. But the button looks a bit cramped. Let’s specify some spacing between the border and the text using the padding. Additionally, we will enforce a minimum width, round the corners, and specify a larger font to make the button look nicer:

QPushButton#evilButton background-color: red; border-style: outset; border-width: 2px; border-radius: 10px; border-color: beige; font: bold 14px; min-width: 10em; padding: 6px; >

The only issue remaining is that the button doesn’t react when we press it. We can fix this by specifying a slightly different background color and use a different border style.

QPushButton#evilButton background-color: red; border-style: outset; border-width: 2px; border-radius: 10px; border-color: beige; font: bold 14px; min-width: 10em; padding: 6px; > QPushButton#evilButton:pressed background-color: rgb(224, 0, 0); border-style: inset; >

Customizing the QPushButton’s Menu Indicator Sub-Control

Subcontrols give access to the sub-elements of a widget. For example, a QPushButton associated with a menu (using QPushButton::setMenu()) has a menu indicator. Let’s customize the menu indicator for the red push button:

QPushButton#evilButton::menu-indicator image: url(myindicator.png); >

By default, the menu indicator is located at the bottom-right corner of the padding rectangle. We can change this by specifying subcontrol-position and subcontrol-origin to anchor the indicator differently. We can also use top and left to move the indicator by a few pixels. For example:

QPushButton::menu-indicator < image: url(myindicator.png); subcontrol-position: right center; subcontrol-origin: padding; left: -2px; >

This positions the myindicator.png to the center right of the QPushButton’s padding rectangle (see subcontrol-origin for more information).

Complex Selector Example

Since red seems to be our favorite color, let’s make the text in QLineEdit red by setting the following application-wide stylesheet:

However, we would like to give a visual indication that a QLineEdit is read-only by making it appear gray:

QLineEdit < color: red >QLineEdit[readOnly=«true»]

At some point, our design team comes with the requirement that all QLineEdits in the registration form (with the object name registrationDialog ) to be brown:

QLineEdit < color: red >QLineEdit[readOnly="true"] < color: gray >#registrationDialog QLineEdit

A few UI design meetings later, we decide that all our QDialogs should have brown colored QLineEdits:

QLineEdit < color: red >QLineEdit[readOnly=«true»] < color: gray >QDialog QLineEdit

Quiz: What happens if we have a read-only QLineEdit in a QDialog? [Hint: The Conflict Resolution section above explains what happens in cases like this.]

Customizing Specific Widgets

This section provides examples to customize specific widgets using Style Sheets.

Customizing QAbstractScrollArea

The background of any QAbstractScrollArea (Item views, QTextEdit and QTextBrowser) can be set using the background properties. For example, to set a background-image that scrolls with the scroll bar:

QTextEdit, QListView < background-color: white; background-image: url(draft.png); background-attachment: scroll; >

If the background-image is to be fixed with the viewport:

QTextEdit, QListView < background-color: white; background-image: url(draft.png); background-attachment: fixed; >

Customizing QCheckBox

Styling of a QCheckBox is almost identical to styling a QRadioButton. The main difference is that a tristate QCheckBox has an indeterminate state.

QCheckBox < spacing: 5px; > QCheckBox::indicator < width: 13px; height: 13px; > QCheckBox::indicator:unchecked < image: url(:/images/checkbox_unchecked.png); > QCheckBox::indicator:unchecked:hover < image: url(:/images/checkbox_unchecked_hover.png); > QCheckBox::indicator:unchecked:pressed < image: url(:/images/checkbox_unchecked_pressed.png); > QCheckBox::indicator:checked < image: url(:/images/checkbox_checked.png); > QCheckBox::indicator:checked:hover < image: url(:/images/checkbox_checked_hover.png); > QCheckBox::indicator:checked:pressed < image: url(:/images/checkbox_checked_pressed.png); > QCheckBox::indicator:indeterminate:hover < image: url(:/images/checkbox_indeterminate_hover.png); > QCheckBox::indicator:indeterminate:pressed < image: url(:/images/checkbox_indeterminate_pressed.png); >

Customizing QComboBox

We will look at an example where the drop down button of a QComboBox appears «merged» with the combo box frame.

QComboBox < border: 1px solid gray; border-radius: 3px; padding: 1px 18px 1px 3px; min-width: 6em; > QComboBox:editable < background: white; >QComboBox:!editable, QComboBox::drop-down:editable < background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #E1E1E1, stop: 0.4 #DDDDDD, stop: 0.5 #D8D8D8, stop: 1.0 #D3D3D3); > /* QComboBox gets the "on" state when the popup is open */ QComboBox:!editable:on, QComboBox::drop-down:editable:on < background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #D3D3D3, stop: 0.4 #D8D8D8, stop: 0.5 #DDDDDD, stop: 1.0 #E1E1E1); > QComboBox:on < /* shift the text when the popup opens */ padding-top: 3px; padding-left: 4px; > QComboBox::drop-down < subcontrol-origin: padding; subcontrol-position: top right; width: 15px; border-left-width: 1px; border-left-color: darkgray; border-left-style: solid; /* just a single line */ border-top-right-radius: 3px; /* same radius as the QComboBox */ border-bottom-right-radius: 3px; > QComboBox::down-arrow < image: url(/usr/share/icons/crystalsvg/16x16/actions/1downarrow.png); > QComboBox::down-arrow:on < /* shift the arrow when popup is open */ top: 1px; left: 1px; >

The pop-up of the QComboBox is a QAbstractItemView and is styled using the descendant selector:

QComboBox QAbstractItemView < border: 2px solid darkgray; selection-background-color: lightgray; >

Customizing QDockWidget

The title bar and the buttons of a QDockWidget can be customized as follows:

QDockWidget < border: 1px solid lightgray; titlebar-close-icon: url(close.png); titlebar-normal-icon: url(undock.png); > QDockWidget::title < text-align: left; /* align the text to the left */ background: lightgray; padding-left: 5px; > QDockWidget::close-button, QDockWidget::float-button < border: 1px solid transparent; background: darkgray; padding: 0px; > QDockWidget::close-button:hover, QDockWidget::float-button:hover < background: gray; >QDockWidget::close-button:pressed, QDockWidget::float-button:pressed < padding: 1px -1px -1px 1px; >

If one desires to move the dock widget buttons to the left, the following style sheet can be used:

QDockWidget < border: 1px solid lightgray; titlebar-close-icon: url(close.png); titlebar-normal-icon: url(float.png); > QDockWidget::title < text-align: left; background: lightgray; padding-left: 35px; > QDockWidget::close-button, QDockWidget::float-button < background: darkgray; padding: 0px; icon-size: 14px; /* maximum icon size */ > QDockWidget::close-button:hover, QDockWidget::float-button:hover < background: gray; >QDockWidget::close-button:pressed, QDockWidget::float-button:pressed < padding: 1px -1px -1px 1px; > QDockWidget::close-button < subcontrol-position: top left; subcontrol-origin: margin; position: absolute; top: 0px; left: 0px; bottom: 0px; width: 14px; > QDockWidget::float-button < subcontrol-position: top left; subcontrol-origin: margin; position: absolute; top: 0px; left: 16px; bottom: 0px; width: 14px; >

Note: To customize the separator (resize handle) of a QDockWidget, use QMainWindow::separator.

Customizing QFrame

A QFrame is styled using the The Box Model.

QFrame, QLabel, QToolTip < border: 2px solid green; border-radius: 4px; padding: 2px; background-image: url(images/welcome.png); >

Customizing QGroupBox

Let us look at an example that moves the QGroupBox’s title to the center.

QGroupBox < background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #E0E0E0, stop: 1 #FFFFFF); border: 2px solid gray; border-radius: 5px; margin-top: 1ex; /* leave space at the top for the title */ > QGroupBox::title < subcontrol-origin: margin; subcontrol-position: top center; /* position at the top center */ padding: 0 3px; background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #FF0ECE, stop: 1 #FFFFFF); >

For a checkable QGroupBox, use the subcontrol and style it exactly like a QCheckBox (i.e)

QGroupBox::indicator < width: 13px; height: 13px; > QGroupBox::indicator:unchecked < image: url(:/images/checkbox_unchecked.png); > /* proceed with styling just like QCheckBox */

Customizing QHeaderView

QHeaderView is customized as follows:

QHeaderView::section < background-color: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #616161, stop: 0.5 #505050, stop: 0.6 #434343, stop:1 #656565); color: white; padding-left: 4px; border: 1px solid #6c6c6c; > QHeaderView::section:checked < background-color: red; > /* style the sort indicator */ QHeaderView::down-arrow < image: url(down_arrow.png); > QHeaderView::up-arrow < image: url(up_arrow.png); >

Customizing QLineEdit

The frame of a QLineEdit is styled using the The Box Model. To create a line edit with rounded corners, we can set:

QLineEdit < border: 2px solid gray; border-radius: 10px; padding: 0 8px; background: yellow; selection-background-color: darkgray; >

The password character of line edits that have QLineEdit::Password echo mode can be set using:

QLineEdit[echoMode="2"] < lineedit-password-character: 9679; >

The background of a read only QLineEdit can be modified as below:

QLineEdit:read—only

Customizing QListView

The background color of alternating rows can be customized using the following style sheet:

QListView < alternate-background-color: yellow; >

To provide a special background when you hover over items, we can use the ::item subcontrol. For example,

QListView < show-decoration-selected: 1; /* make the selection span the entire width of the view */ > QListView::item:alternate < background: #EEEEEE; > QListView::item:selected < border: 1px solid #6a6ea9; > QListView::item:selected:!active < background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #ABAFE5, stop: 1 #8588B2); > QListView::item:selected:active < background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #6a6ea9, stop: 1 #888dd9); > QListView::item:hover < background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #FAFBFE, stop: 1 #DCDEF1); >

Customizing QMainWindow

The separator of a QMainWindow can be styled as follows:

QMainWindow::separator < background: yellow; width: 10px; /* when vertical */ height: 10px; /* when horizontal */ > QMainWindow::separator:hover

Customizing QMenu

Individual items of a QMenu are styled using the ‘item’ subcontrol as follows:

QMenu < background-color: #ABABAB; /* sets background of the menu */ border: 1px solid black; > QMenu::item < /* sets background of menu item. set this to something non-transparent if you want menu color and menu item color to be different */ background-color: transparent; > QMenu::item:selected < /* when user selects item using mouse or keyboard */ background-color: #654321; >

For a more advanced customization, use a style sheet as follows:

QMenu < background-color: white; margin: 2px; /* some spacing around the menu */ > QMenu::item < padding: 2px 25px 2px 20px; border: 1px solid transparent; /* reserve space for selection border */ > QMenu::item:selected < border-color: darkblue; background: rgba(100, 100, 100, 150); > QMenu::icon:checked < /* appearance of a 'checked' icon */ background: gray; border: 1px inset gray; position: absolute; top: 1px; right: 1px; bottom: 1px; left: 1px; > QMenu::separator < height: 2px; background: lightblue; margin-left: 10px; margin-right: 5px; > QMenu::indicator < width: 13px; height: 13px; > /* non-exclusive indicator = check box style indicator (see QActionGroup::setExclusive) */ QMenu::indicator:non-exclusive:unchecked < image: url(:/images/checkbox_unchecked.png); > QMenu::indicator:non-exclusive:unchecked:selected < image: url(:/images/checkbox_unchecked_hover.png); > QMenu::indicator:non-exclusive:checked < image: url(:/images/checkbox_checked.png); > QMenu::indicator:non-exclusive:checked:selected < image: url(:/images/checkbox_checked_hover.png); > /* exclusive indicator = radio button style indicator (see QActionGroup::setExclusive) */ QMenu::indicator:exclusive:unchecked < image: url(:/images/radiobutton_unchecked.png); > QMenu::indicator:exclusive:unchecked:selected < image: url(:/images/radiobutton_unchecked_hover.png); > QMenu::indicator:exclusive:checked < image: url(:/images/radiobutton_checked.png); > QMenu::indicator:exclusive:checked:selected < image: url(:/images/radiobutton_checked_hover.png); >

Customizing QMenuBar

QMenuBar is styled as follows:

QMenuBar < background-color: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 lightgray, stop:1 darkgray); spacing: 3px; /* spacing between menu bar items */ > QMenuBar::item < padding: 1px 4px; background: transparent; border-radius: 4px; > QMenuBar::item:selected < /* when selected using mouse or keyboard */ background: #a8a8a8; > QMenuBar::item:pressed < background: #888888; >

Customizing QProgressBar

The QProgressBar’s border, chunk, and text-align can be customized using style sheets. However, if one property or sub-control is customized, all the other properties or sub-controls must be customized as well.

For example, we change the border to grey and the chunk to cerulean.

QProgressBar < border: 2px solid grey; border-radius: 5px; > QProgressBar::chunk < background-color: #05B8CC; width: 20px; >

This leaves the text-align, which we customize by positioning the text in the center of the progress bar.

QProgressBar < border: 2px solid grey; border-radius: 5px; text-align: center; >

A margin can be included to obtain more visible chunks.

In the screenshot above, we use a margin of 0.5 pixels.

QProgressBar::chunk < background-color: #CD96CD; width: 10px; margin: 0.5px; >

Customizing QPushButton

A QPushButton is styled as follows:

QPushButton < border: 2px solid #8f8f91; border-radius: 6px; background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #f6f7fa, stop: 1 #dadbde); min-width: 80px; > QPushButton:pressed < background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #dadbde, stop: 1 #f6f7fa); > QPushButton:flat < border: none; /* no border for a flat push button */ > QPushButton:default < border-color: navy; /* make the default button prominent */ >

For a QPushButton with a menu, use the ::menu-indicator subcontrol.

QPushButton:open < /* when the button has its menu open */ background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #dadbde, stop: 1 #f6f7fa); > QPushButton::menu-indicator < image: url(menu_indicator.png); subcontrol-origin: padding; subcontrol-position: bottom right; > QPushButton::menu-indicator:pressed, QPushButton::menu-indicator:open < position: relative; top: 2px; left: 2px; /* shift the arrow by 2 px */ >

Checkable QPushButton have the :checked pseudo state set.

Customizing QRadioButton

The indicator of a QRadioButton can be changed using:

QRadioButton::indicator < width: 13px; height: 13px; > QRadioButton::indicator::unchecked < image: url(:/images/radiobutton_unchecked.png); > QRadioButton::indicator:unchecked:hover < image: url(:/images/radiobutton_unchecked_hover.png); > QRadioButton::indicator:unchecked:pressed < image: url(:/images/radiobutton_unchecked_pressed.png); > QRadioButton::indicator::checked < image: url(:/images/radiobutton_checked.png); > QRadioButton::indicator:checked:hover < image: url(:/images/radiobutton_checked_hover.png); > QRadioButton::indicator:checked:pressed < image: url(:/images/radiobutton_checked_pressed.png); >

Customizing QScrollBar

The QScrollBar can be styled using its subcontrols like handle, add-line, sub-line, and so on. Note that if one property or sub-control is customized, all the other properties or sub-controls must be customized as well.

The scroll bar above has been styled in aquamarine with a solid grey border.

QScrollBar:horizontal < border: 2px solid grey; background: #32CC99; height: 15px; margin: 0px 20px 0 20px; > QScrollBar::handle:horizontal < background: white; min-width: 20px; > QScrollBar::add-line:horizontal < border: 2px solid grey; background: #32CC99; width: 20px; subcontrol-position: right; subcontrol-origin: margin; > QScrollBar::sub-line:horizontal < border: 2px solid grey; background: #32CC99; width: 20px; subcontrol-position: left; subcontrol-origin: margin; >

The left-arrow and right-arrow have a solid grey border with a white background. As an alternative, you could also embed the image of an arrow.

QScrollBar:left—arrow:horizontal, QScrollBar::right—arrow:horizontal < border: 2px solid grey; width: 3px; height: 3px; background: white; > QScrollBar::add—page:horizontal, QScrollBar::sub—page:horizontal

If you want the scroll buttons of the scroll bar to be placed together (instead of the edges) like on macOS, you can use the following stylesheet:

QScrollBar:horizontal < border: 2px solid green; background: cyan; height: 15px; margin: 0px 40px 0 0px; > QScrollBar::handle:horizontal < background: gray; min—width: 20px; > QScrollBar::add—line:horizontal < background: blue; width: 16px; subcontrol—position: right; subcontrol—origin: margin; border: 2px solid black; > QScrollBar::sub—line:horizontal < background: magenta; width: 16px; subcontrol—position: top right; subcontrol—origin: margin; border: 2px solid black; position: absolute; right: 20px; > QScrollBar:left—arrow:horizontal, QScrollBar::right—arrow:horizontal < width: 3px; height: 3px; background: pink; > QScrollBar::add—page:horizontal, QScrollBar::sub—page:horizontal

The scroll bar using the above stylesheet looks like this:

To customize a vertical scroll bar use a style sheet similar to the following:

QScrollBar:vertical < border: 2px solid grey; background: #32CC99; width: 15px; margin: 22px 0 22px 0; > QScrollBar::handle:vertical < background: white; min—height: 20px; > QScrollBar::add—line:vertical < border: 2px solid grey; background: #32CC99; height: 20px; subcontrol—position: bottom; subcontrol—origin: margin; > QScrollBar::sub—line:vertical < border: 2px solid grey; background: #32CC99; height: 20px; subcontrol—position: top; subcontrol—origin: margin; > QScrollBar::up—arrow:vertical, QScrollBar::down—arrow:vertical < border: 2px solid grey; width: 3px; height: 3px; background: white; > QScrollBar::add—page:vertical, QScrollBar::sub—page:vertical

Customizing QSizeGrip

QSizeGrip is usually styled by just setting an image.

QSizeGrip < image: url(:/images/sizegrip.png); width: 16px; height: 16px; >

Customizing QSlider

You can style horizontal slider as below:

QSlider::groove:horizontal < border: 1px solid #999999; height: 8px; /* the groove expands to the size of the slider by default. by giving it a height, it has a fixed size */ background: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #B1B1B1, stop:1 #c4c4c4); margin: 2px 0; > QSlider::handle:horizontal < background: qlineargradient(x1:0, y1:0, x2:1, y2:1, stop:0 #b4b4b4, stop:1 #8f8f8f); border: 1px solid #5c5c5c; width: 18px; margin: -2px 0; /* handle is placed by default on the contents rect of the groove. Expand outside the groove */ border-radius: 3px; >

If you want to change the color of the slider parts before and after the handle, you can use the add-page and sub-page subcontrols. For example, for a vertical slider:

QSlider::groove:vertical < background: red; position: absolute; /* absolutely position 4px from the left and right of the widget. setting margins on the widget should work too. */ left: 4px; right: 4px; > QSlider::handle:vertical < height: 10px; background: green; margin: 0 —4px; /* expand outside the groove */ > QSlider::add—page:vertical < background: white; >QSlider::sub—page:vertical

Customizing QSpinBox

QSpinBox can be completely customized as below (the style sheet has commentary inline):

QSpinBox < padding-right: 15px; /* make room for the arrows */ border-image: url(:/images/frame.png) 4; border-width: 3; > QSpinBox::up-button < subcontrol-origin: border; subcontrol-position: top right; /* position at the top right corner */ width: 16px; /* 16 + 2*1px border-width = 15px padding + 3px parent border */ border-image: url(:/images/spinup.png) 1; border-width: 1px; > QSpinBox::up-button:hover < border-image: url(:/images/spinup_hover.png) 1; > QSpinBox::up-button:pressed < border-image: url(:/images/spinup_pressed.png) 1; > QSpinBox::up-arrow < image: url(:/images/up_arrow.png); width: 7px; height: 7px; > QSpinBox::up-arrow:disabled, QSpinBox::up-arrow:off < /* off state when value is max */ image: url(:/images/up_arrow_disabled.png); > QSpinBox::down-button < subcontrol-origin: border; subcontrol-position: bottom right; /* position at bottom right corner */ width: 16px; border-image: url(:/images/spindown.png) 1; border-width: 1px; border-top-width: 0; > QSpinBox::down-button:hover < border-image: url(:/images/spindown_hover.png) 1; > QSpinBox::down-button:pressed < border-image: url(:/images/spindown_pressed.png) 1; > QSpinBox::down-arrow < image: url(:/images/down_arrow.png); width: 7px; height: 7px; > QSpinBox::down-arrow:disabled, QSpinBox::down-arrow:off < /* off state when value in min */ image: url(:/images/down_arrow_disabled.png); >

Customizing QSplitter

A QSplitter derives from a QFrame and hence can be styled like a QFrame. The grip or the handle is customized using the ::handle subcontrol.

QSplitter::handle < image: url(images/splitter.png); > QSplitter::handle:horizontal < width: 2px; > QSplitter::handle:vertical < height: 2px; > QSplitter::handle:pressed < url(images/splitter_pressed.png); >

Customizing QStatusBar

We can provide a background for the status bar and a border for items inside the status bar as follows:

QStatusBar < background: brown; >QStatusBar::item < border: 1px solid red; border-radius: 3px; >

Note that widgets that have been added to the QStatusBar can be styled using the descendant declaration (i.e)

QStatusBar QLabel < border: 3px solid white; >

Customizing QTabWidget and QTabBar

For the screenshot above, we need a stylesheet as follows:

QTabWidget::pane < /* The tab widget frame */ border-top: 2px solid #C2C7CB; > QTabWidget::tab-bar < left: 5px; /* move to the right by 5px */ > /* Style the tab using the tab sub-control. Note that it reads QTabBar _not_ QTabWidget */ QTabBar::tab < background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #E1E1E1, stop: 0.4 #DDDDDD, stop: 0.5 #D8D8D8, stop: 1.0 #D3D3D3); border: 2px solid #C4C4C3; border-bottom-color: #C2C7CB; /* same as the pane color */ border-top-left-radius: 4px; border-top-right-radius: 4px; min-width: 8ex; padding: 2px; > QTabBar::tab:selected, QTabBar::tab:hover < background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #fafafa, stop: 0.4 #f4f4f4, stop: 0.5 #e7e7e7, stop: 1.0 #fafafa); > QTabBar::tab:selected < border-color: #9B9B9B; border-bottom-color: #C2C7CB; /* same as pane color */ > QTabBar::tab:!selected < margin-top: 2px; /* make non-selected tabs look smaller */ >

Often we require the tabs to overlap to look like below:

For a tab widget that looks like above, we make use of negative margins. Negative values draw the element closer to its neighbors than it would be by default. The resulting stylesheet looks like this:

QTabWidget::pane < /* The tab widget frame */ border-top: 2px solid #C2C7CB; > QTabWidget::tab-bar < left: 5px; /* move to the right by 5px */ > /* Style the tab using the tab sub-control. Note that it reads QTabBar _not_ QTabWidget */ QTabBar::tab < background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #E1E1E1, stop: 0.4 #DDDDDD, stop: 0.5 #D8D8D8, stop: 1.0 #D3D3D3); border: 2px solid #C4C4C3; border-bottom-color: #C2C7CB; /* same as the pane color */ border-top-left-radius: 4px; border-top-right-radius: 4px; min-width: 8ex; padding: 2px; > QTabBar::tab:selected, QTabBar::tab:hover < background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #fafafa, stop: 0.4 #f4f4f4, stop: 0.5 #e7e7e7, stop: 1.0 #fafafa); > QTabBar::tab:selected < border-color: #9B9B9B; border-bottom-color: #C2C7CB; /* same as pane color */ > QTabBar::tab:!selected < margin-top: 2px; /* make non-selected tabs look smaller */ > /* make use of negative margins for overlapping tabs */ QTabBar::tab:selected < /* expand/overlap to the left and right by 4px */ margin-left: -4px; margin-right: -4px; > QTabBar::tab:first:selected < margin-left: 0; /* the first selected tab has nothing to overlap with on the left */ > QTabBar::tab:last:selected < margin-right: 0; /* the last selected tab has nothing to overlap with on the right */ > QTabBar::tab:only-one < margin: 0; /* if there is only one tab, we don't want overlapping margins */ >

To move the tab bar to the center (as below), we require the following stylesheet:

QTabWidget::pane < /* The tab widget frame */ border-top: 2px solid #C2C7CB; position: absolute; top: -0.5em; > QTabWidget::tab-bar < alignment: center; >/* Style the tab using the tab sub-control. Note that it reads QTabBar _not_ QTabWidget */ QTabBar::tab < background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #E1E1E1, stop: 0.4 #DDDDDD, stop: 0.5 #D8D8D8, stop: 1.0 #D3D3D3); border: 2px solid #C4C4C3; border-bottom-color: #C2C7CB; /* same as the pane color */ border-top-left-radius: 4px; border-top-right-radius: 4px; min-width: 8ex; padding: 2px; > QTabBar::tab:selected, QTabBar::tab:hover < background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #fafafa, stop: 0.4 #f4f4f4, stop: 0.5 #e7e7e7, stop: 1.0 #fafafa); > QTabBar::tab:selected < border-color: #9B9B9B; border-bottom-color: #C2C7CB; /* same as pane color */ >

The tear indicator and the scroll buttons can be further customized as follows:

QTabBar::tear < image: url(tear_indicator.png); > QTabBar::scroller < /* the width of the scroll buttons */ width: 20px; > QTabBar QToolButton < /* the scroll buttons are tool buttons */ border-image: url(scrollbutton.png) 2; border-width: 2px; > QTabBar QToolButton::right-arrow < /* the arrow mark in the tool buttons */ image: url(rightarrow.png); > QTabBar QToolButton::left-arrow < image: url(leftarrow.png); >

Since Qt 4.6 the close button can be customized as follow:

QTabBar::close-button < image: url(close.png) subcontrol-position: left; > QTabBar::close-button:hover < image: url(close-hover.png) >

Customizing QTableView

Suppose we’d like our selected item in QTableView to have bubblegum pink fade to white as its background.

This is possible with the selection-background-color property and the syntax required is:

QTableView < selection-background-color: qlineargradient(x1: 0, y1: 0, x2: 0.5, y2: 0.5, stop: 0 #FF92BB, stop: 1 white); >

The corner widget can be customized using the following style sheet

QTableView QTableCornerButton::section < background: red; border: 2px outset red; >

The QTableView’s checkbox indicator can also be customized. In the following snippet the indicator background-color in unchecked state is customized:

QTableView::indicator:unchecked < background-color: #d7d6d5 >

Customizing QToolBar

The background and the handle of a QToolBar is customized as below:

QToolBar < background: red; spacing: 3px; /* spacing between items in the tool bar */ > QToolBar::handle < image: url(handle.png); >

Customizing QToolBox

The tabs of the QToolBox are customized using the ‘tab’ subcontrol.

QToolBox::tab < background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #E1E1E1, stop: 0.4 #DDDDDD, stop: 0.5 #D8D8D8, stop: 1.0 #D3D3D3); border-radius: 5px; color: darkgray; > QToolBox::tab:selected < /* italicize selected tabs */ font: italic; color: white; >

Customizing QToolButton

There are three types of QToolButtons.

• The QToolButton has no menu. In this case, the QToolButton is styled exactly like QPushButton. See Customizing QPushButton for an example.
• The QToolButton has a menu and has the QToolButton::popupMode set to QToolButton::DelayedPopup or QToolButton::InstantPopup. In this case, the QToolButton is styled exactly like a QPushButton with a menu. See Customizing QPushButton for an example of the usage of the menu-indicator pseudo state.
• The QToolButton has its QToolButton::popupMode set to QToolButton::MenuButtonPopup. In this case, we style it as follows:

QToolButton < /* all types of tool button */ border: 2px solid #8f8f91; border-radius: 6px; background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #f6f7fa, stop: 1 #dadbde); > QToolButton[popupMode="1"] < /* only for MenuButtonPopup */ padding-right: 20px; /* make way for the popup button */ > QToolButton:pressed < background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #dadbde, stop: 1 #f6f7fa); > /* the subcontrols below are used only in the MenuButtonPopup mode */ QToolButton::menu-button < border: 2px solid gray; border-top-right-radius: 6px; border-bottom-right-radius: 6px; /* 16px width + 4px for border = 20px allocated above */ width: 16px; > QToolButton::menu-arrow < image: url(downarrow.png); > QToolButton::menu-arrow:open < top: 1px; left: 1px; /* shift it a bit */ >

Customizing QToolTip

QToolTip is customized exactly like a QLabel. In addition, for platforms that support it, the opacity property may be set to adjust the opacity.

QToolTip < border: 2px solid darkkhaki; padding: 5px; border-radius: 3px; opacity: 200; >

Customizing QTreeView

The background color of alternating rows can be customized using the following style sheet:

QTreeView < alternate-background-color: yellow; >

To provide a special background when you hover over items, we can use the ::item subcontrol. For example,

QTreeView < show-decoration-selected: 1; > QTreeView::item < border: 1px solid #d9d9d9; border-top-color: transparent; border-bottom-color: transparent; > QTreeView::item:hover < background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #e7effd, stop: 1 #cbdaf1); border: 1px solid #bfcde4; > QTreeView::item:selected < border: 1px solid #567dbc; > QTreeView::item:selected:active< background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #6ea1f1, stop: 1 #567dbc); > QTreeView::item:selected:!active < background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #6b9be8, stop: 1 #577fbf); >

The branches of a QTreeView are styled using the ::branch subcontrol. The following stylesheet color codes the various states when drawing a branch.

QTreeView::branch < background: palette(base); >QTreeView::branch:has—siblings:!adjoins—item < background: cyan; >QTreeView::branch:has—siblings:adjoins—item < background: red; >QTreeView::branch:!has—children:!has—siblings:adjoins—item < background: blue; >QTreeView::branch:closed:has—children:has—siblings < background: pink; >QTreeView::branch:has—children:!has—siblings:closed < background: gray; >QTreeView::branch:open:has—children:has—siblings < background: magenta; >QTreeView::branch:open:has—children:!has—siblings

Colorful, though it is, a more useful example can be made using the following images:

vline.png	branch-more.png	branch-end.png	branch-closed.png	branch-open.png

QTreeView::branch:has-siblings:!adjoins-item < border-image: url(vline.png) 0; > QTreeView::branch:has-siblings:adjoins-item < border-image: url(branch-more.png) 0; > QTreeView::branch:!has-children:!has-siblings:adjoins-item < border-image: url(branch-end.png) 0; > QTreeView::branch:has-children:!has-siblings:closed, QTreeView::branch:closed:has-children:has-siblings < border-image: none; image: url(branch-closed.png); > QTreeView::branch:open:has-children:!has-siblings, QTreeView::branch:open:has-children:has-siblings < border-image: none; image: url(branch-open.png); >

The resulting tree view looks like this:

Common Mistakes

This section lists some common mistakes when using stylesheets.

QPushButton and images

When styling a QPushButton, it is often desirable to use an image as the button graphic. It is common to try the background-image property, but this has a number of drawbacks: For instance, the background will often appear hidden behind the button decoration, because it is not considered a background. In addition, if the button is resized, the entire background will be stretched or tiled, which does not always look good.

It is better to use the border-image property, as it will always display the image, regardless of the background (you can combine it with a background if it has alpha values in it), and it has special settings to deal with button resizing.

Consider the following snippet:

QPushButton < color: grey; border-image: url(/home/kamlie/code/button.png) 3 10 3 10; border-top: 3px transparent; border-bottom: 3px transparent; border-right: 10px transparent; border-left: 10px transparent; >

This will produce a button looking like this:

The numbers after the url gives the top, right, bottom and left number of pixels, respectively. These numbers correspond to the border and should not stretch when the size changes. Whenever you resize the button, the middle part of the image will stretch in both directions, while the pixels specified in the stylesheet will not. This makes the borders of the button look more natural, like this:

With borders

Without borders

© 2023 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.

Qt Style Sheets Reference

Qt Style Sheets support various properties, pseudo-states, and subcontrols that make it possible to customize the look of widgets.

List of Stylable Widgets

The following table lists the Qt widgets that can be customized using style sheets:

Widget	How to Style
QAbstractScrollArea	Supports the box model. All derivatives of QAbstractScrollArea, including QTextEdit, and QAbstractItemView (all item view classes), support scrollable backgrounds using background-attachment. Setting the background-attachment to fixed provides a background-image that does not scroll with the viewport. Setting the background-attachment to scroll , scrolls the background-image when the scroll bars move. See Customizing QAbstractScrollArea for an example.
QCheckBox	Supports the box model. The check indicator can be styled using the ::indicator subcontrol. By default, the indicator is placed in the Top Left corner of the Contents rectangle of the widget. The spacing property specifies the spacing between the check indicator and the text. See Customizing QCheckBox for an example.
QColumnView	The grip can be styled be using the image property. The arrow indicators can by styled using the ::left-arrow subcontrol and the ::right-arrow subcontrol.
QComboBox	The frame around the combobox can be styled using the box model. The drop-down button can be styled using the ::drop-down subcontrol. By default, the drop-down button is placed in the top right corner of the padding rectangle of the widget. The arrow mark inside the drop-down button can be styled using the ::down-arrow subcontrol. By default, the arrow is placed in the center of the contents rectangle of the drop-down subcontrol. The color of the placeholder text can be set using the placeholder-text-color property. See Customizing QComboBox for an example.
QDateEdit	See QSpinBox.
QDateTimeEdit	See QSpinBox.
QDialog	Supports only the background, background-clip and background-origin properties.

Warning: Make sure you define the Q_OBJECT macro for your custom widget.
Note: Use QMainWindow::separator to style the resize handle.

Warning: The style sheet has no effect when the QDockWidget is undocked as Qt uses native top level windows when undocked.

Warning: When running on Qt/Mac, the menu bar is usually embedded into the system-wide menu bar. In this case, the style sheet will have no effect.

Warning: If you only set a background-color on a QPushButton, the background may not appear unless you set the border property to some value. This is because, by default, the QPushButton draws a native border which completely overlaps the background-color. For example,

QPushButton < background-color: red; border: none; >

Warning: If you only set a background-color on a QTableCornerButton, the background may not appear unless you set the border property to some value. This is because, by default, the QTableCornerButton draws a native border which completely overlaps the background-color.

Warning: If you only set a background-color on a QToolButton, the background will not appear unless you set the border property to some value. This is because, by default, the QToolButton draws a native border which completely overlaps the background-color. For example,

QToolButton < background-color: red; border: none; >

void CustomWidget::paintEvent(QPaintEvent *) < QStyleOption opt; opt.initFrom(this); QPainter p(this); style()->drawPrimitive(QStyle::PE_Widget, &opt, &p, this); >

The above code is a no-operation if there is no stylesheet set.
Warning: Make sure you define the Q_OBJECT macro for your custom widget.

List of Properties

The table below lists all the properties supported by Qt Style Sheets. Which values can be given to an property depend on the property’s type. Unless otherwise specified, properties below apply to all widgets. Properties marked with an asterisk * are specific to Qt and have no equivalent in CSS2 or CSS3.

Property	Type	Description
accent-color	Brush	The property sets the Accent , which is used to emphasize interactive UI elements. If this property is not set, it defaults to the highlight color.
alternate-background-color	Brush	The alternate background color used in QAbstractItemView subclasses. If this property is not set, the default value is whatever is set for the palette’s AlternateBase role. Example:

QTreeView < alternate-background-color: blue; background: yellow; >

Often, it is required to set a fill pattern similar to the styles in Qt::BrushStyle. You can use the background-color property for Qt::SolidPattern, Qt::RadialGradientPattern, Qt::LinearGradientPattern and Qt::ConicalGradientPattern. The other patterns are easily achieved by creating a background image that contains the pattern. Example:

QLabel < background-image: url(dense6pattern.png); background-repeat: repeat-xy; >

QLabel < background-color: yellow > QLineEdit < background-color: rgb(255, 0, 0) >

QFrame < background-image: url(:/images/hydro.png) >

QFrame < background: white url(:/images/ring.png); background-repeat: repeat-y; background-position: left; >

QFrame < background: url(:/images/footer.png); background-position: bottom left; >

QTextEdit < background-image: url("leaves.png"); background-attachment: fixed; >

QFrame < background-image: url(:/images/header.png); background-position: top left; background-origin: content; background-clip: padding; >

QFrame < background-image: url(:/images/header.png); background-position: top left; background-origin: content; >

QLineEdit < border: 1px solid white >

QLineEdit < border-width: 1px; border-style: solid; border-color: white; >

QLineEdit < border-width: 1px; border-style: solid; border-radius: 4px; >

QLineEdit < border-width: 1px; border-style: solid; border-color: blue; >

QLineEdit < border-width: 2px; border-style: solid; border-color: darkblue; >

QSpinBox::down-button < bottom: 2px >

* < button-layout: 2 >

QDialogButtonBox < dialogbuttonbox-buttons-have-icons: 1; >

Note: Styles defining this property must be applied before the QDialogButtonBox is created; this means that you must apply the style to the parent widget or to the application itself.

QCheckBox < font: bold italic large "Times New Roman" >

QCheckBox < font-family: "New Century Schoolbook" >

QTextEdit < font-size: 12px >

QTextEdit < font-style: italic >

* < gridline-color: gray >

Warning: Unless otherwise specified, this property has no effect when set on widgets. If you want a widget with a fixed height, set the min-height and max-height to the same value.

QSpinBox::down-button < height: 10px >

Note: It’s the application’s responsibility to assign an icon to a button (using the QAbstractButton API), and not the style’s. So be careful setting it unless your stylesheet is targeting a specific application.

• QCheckBox
• QListView
• QPushButton
• QRadioButton
• QTabBar
• QToolBar
• QToolBox
• QTreeView

The image property accepts a list of Urls or an svg . The actual image that is drawn is determined using the same algorithm as QIcon (i.e) the image is never scaled up but always scaled down if necessary. If a svg is specified, the image is scaled to the size of the contents rectangle.

Setting the image property on sub controls implicitly sets the width and height of the sub-control (unless the image in a SVG).

In Qt 4.3 and later, the alignment of the image within the rectangle can be specified using image-position.

This property is for subcontrols only–we don’t support it for other elements.

Warning: The QIcon SVG plugin is needed to render SVG images.

// implicitly sets the size of down-button to the // size of spindown.png QSpinBox::down-button < image: url(:/images/spindown.png) >

If position is absolute , the left property specifies the subcontrol’s left edge in relation to the parent’s left edge (see also subcontrol-origin).

If this property is not specified, it defaults to 0 .

QSpinBox::down-button < left: 2px >

If this property is not specified, it defaults to the value specified by the current style for the SH_LineEdit_PasswordCharacter style hint.

* < lineedit-password-character: 9679 >

If this property is not specified, it defaults to the value specified by the current style for the SH_LineEdit_PasswordMaskDelay style hint.

This property was added in Qt 5.4.

* < lineedit-password-mask-delay: 1000 >

If this property is not specified, it defaults to 0 .

The value is relative to the contents rect in the box model.

QSpinBox < max-height: 24px >

The value is relative to the contents rect in the box model.

QComboBox < max-width: 72px >

If this property is not specified, it defaults to the value specified by the current style for the SH_MessageBox_TextInteractionFlags style hint.

QMessageBox < messagebox-text-interaction-flags: 5 >

If this property is not specified, the minimum height is derived based on the widget’s contents and the style.

The value is relative to the contents rect in the box model.

QComboBox < min-height: 24px >

Note: Setting this property might allow widgets to shrink smaller than the space required for the contents.

If this property is not specified, the minimum width is derived based on the widget’s contents and the style.

The value is relative to the contents rect in the box model.

QComboBox < min-width: 72px >

Note: Setting this property might allow widgets to shrink smaller than the space required for the contents.

If this property is not specified, it defaults to the value specified by the current style for the SH_ToolTipLabel_Opacity style hint.

If this property is not specified, it defaults to 0 .

If this property is not set, the default value is whatever is set for the palette’s PlaceholderText role.

QLineEdit < placeholder-text-color: #800000ff > /* semi-transparent blue */

Available since 6.5.

If this property is not specified, it defaults to relative .

If position is absolute , the right property specifies the subcontrol’s right edge in relation to the parent’s right edge (see also subcontrol-origin).

QSpinBox::down-button < right: 2px >

This property is supported by all widgets that respect the QWidget::palette and that show selection text.

If this property is not set, the default value is whatever is set for the palette’s Highlight role.

QTextEdit < selection-background-color: darkblue >

This property is supported by all widgets that respect the QWidget::palette and that show selection text.

If this property is not set, the default value is whatever is set for the palette’s HighlightedText role.

QTextEdit < selection-color: white >

If this property is not specified, it defaults to the value specified by the current style for the SH_ItemView_ShowDecorationSelected style hint.

* < show-decoration-selected: 1 >

This property is supported by QCheckBox, checkable QGroupBoxes, QMenuBar, and QRadioButton.

If this property is not specified, the default value depends on the widget and on the current style.

If this property is not specified, the default is padding .

QSpinBox::up-button < image: url(:/images/spinup.png); subcontrol-origin: content; subcontrol-position: right top; >

If this property is not specified, it defaults to a value that depends on the subcontrol.

QSpinBox::down-button < image: url(:/images/spindown.png); subcontrol-origin: padding; subcontrol-position: right bottom; >

If this property is not specified, it defaults to the value specified by the current style for the SH_Widget_Animation_Duration style hint.

This property was added in Qt 5.10.

* < widget-animation-duration: 100 >

If this value is not specified, it defaults to the value that depends on the native style.

QPushButton < text-align: left; >

This property is currently supported only by QPushButton and QProgressBar.

If position is absolute , the top property specifies the subcontrol’s top edge in relation to the parent’s top edge (see also subcontrol-origin).

If this property is not specified, it defaults to 0 .

QSpinBox::up-button < top: 2px >

If this property is not specified, it defaults to a value that depends on the subcontrol/widget and on the current style.

Warning: Unless otherwise specified, this property has no effect when set on widgets. If you want a widget with a fixed width, set the min-width and max-width to the same value.

QSpinBox::up-button < width: 12px >

Note: The list can only include properties that are not pixmap-based.

List of Icons

Icons used in Qt can be customized using the following properties. Each of the properties listed in this section have the type Icon.

Note that for icons to appear in buttons in a QDialogButtonBox, you need to set the dialogbuttonbox-buttons-have-icons property to true. Also, to customize the size of the icons, use the icon-size property.

Name	QStyle::StandardPixmap
backward-icon	QStyle::SP_ArrowBack
cd-icon	QStyle::SP_DriveCDIcon
computer-icon	QStyle::SP_ComputerIcon
desktop-icon	QStyle::SP_DesktopIcon
dialog-apply-icon	QStyle::SP_DialogApplyButton
dialog-cancel-icon	QStyle::SP_DialogCancelButton
dialog-close-icon	QStyle::SP_DialogCloseButton
dialog-discard-icon	QStyle::SP_DialogDiscardButton
dialog-help-icon	QStyle::SP_DialogHelpButton
dialog-no-icon	QStyle::SP_DialogNoButton
dialog-ok-icon	QStyle::SP_DialogOkButton
dialog-open-icon	QStyle::SP_DialogOpenButton
dialog-reset-icon	QStyle::SP_DialogResetButton
dialog-save-icon	QStyle::SP_DialogSaveButton
dialog-yes-icon	QStyle::SP_DialogYesButton
directory-closed-icon	QStyle::SP_DirClosedIcon
directory-icon	QStyle::SP_DirIcon
directory-link-icon	QStyle::SP_DirLinkIcon
directory-open-icon	QStyle::SP_DirOpenIcon
dockwidget-close-icon	QStyle::SP_DockWidgetCloseButton
downarrow-icon	QStyle::SP_ArrowDown
dvd-icon	QStyle::SP_DriveDVDIcon
file-icon	QStyle::SP_FileIcon
file-link-icon	QStyle::SP_FileLinkIcon
filedialog-contentsview-icon	QStyle::SP_FileDialogContentsView
filedialog-detailedview-icon	QStyle::SP_FileDialogDetailedView
filedialog-end-icon	QStyle::SP_FileDialogEnd
filedialog-infoview-icon	QStyle::SP_FileDialogInfoView
filedialog-listview-icon	QStyle::SP_FileDialogListView
filedialog-new-directory-icon	QStyle::SP_FileDialogNewFolder
filedialog-parent-directory-icon	QStyle::SP_FileDialogToParent
filedialog-start-icon	QStyle::SP_FileDialogStart
floppy-icon	QStyle::SP_DriveFDIcon
forward-icon	QStyle::SP_ArrowForward
harddisk-icon	QStyle::SP_DriveHDIcon
home-icon	QStyle::SP_DirHomeIcon
lineedit-clear-button-icon	QStyle::SP_LineEditClearButton
leftarrow-icon	QStyle::SP_ArrowLeft
messagebox-critical-icon	QStyle::SP_MessageBoxCritical
messagebox-information-icon	QStyle::SP_MessageBoxInformation
messagebox-question-icon	QStyle::SP_MessageBoxQuestion
messagebox-warning-icon	QStyle::SP_MessageBoxWarning
network-icon	QStyle::SP_DriveNetIcon
rightarrow-icon	QStyle::SP_ArrowRight
titlebar-contexthelp-icon	QStyle::SP_TitleBarContextHelpButton
titlebar-maximize-icon	QStyle::SP_TitleBarMaxButton
titlebar-menu-icon	QStyle::SP_TitleBarMenuButton
titlebar-minimize-icon	QStyle::SP_TitleBarMinButton
titlebar-normal-icon	QStyle::SP_TitleBarNormalButton
titlebar-shade-icon	QStyle::SP_TitleBarShadeButton
titlebar-unshade-icon	QStyle::SP_TitleBarUnshadeButton
trash-icon	QStyle::SP_TrashIcon
uparrow-icon	QStyle::SP_ArrowUp

List of Property Types

The following table summarizes the syntax and meaning of the different property types.

Type	Syntax	Description
Alignment	< top | bottom | left | right | center >*	Horizontal and/or vertical alignment.

QTextEdit < background-position: bottom center >

QDialog < etch-disabled-text: 1 >

QLabel < border-color: red > /* red red red red */ QLabel < border-color: red blue > /* red blue red blue */ QLabel < border-color: red blue green > /* red blue green blue */ QLabel < border-color: red blue green yellow > /* red blue green yellow */

QLabel < border-width: 1px > /* 1px 1px 1px 1px */ QLabel < border-width: 1px 2px > /* 1px 2px 1px 2px */ QLabel < border-width: 1px 2px 3px > /* 1px 2px 3px 2px */ QLabel < border-width: 1px 2px 3px 4px > /* 1px 2px 3px 4px */

QLabel < border-color: red > /* opaque red */ QLabel < border-color: #FF0000 > /* opaque red */ QLabel < border-color: rgba(255, 0, 0, 75%) > /* 75% opaque red */ QLabel < border-color: rgb(255, 0, 0) > /* opaque red */ QLabel < border-color: rgb(100%, 0%, 0%) > /* opaque red */ QLabel < border-color: hsv(60, 100%, 100%) > /* opaque yellow */ QLabel < border-color: hsva(240, 255, 255, 75%) > /* 75% blue */ QLabel < border-color: hsl(60, 100%, 50%) > /* opaque yellow */ QLabel < border-color: hsla(240, 255, 50%, 75%) > /* 75% blue */

Note: The RGB colors allowed are the same as those allowed with CSS 2.1, as listed here.

• Linear gradients interpolate colors between start and end points.
• Radial gradients interpolate colors between a focal point and end points on a circle surrounding it.
• Conical gradients interpolate colors around a center point.

Gradients are specified in Object Bounding Mode. Imagine the box in which the gradient is rendered, to have its top left corner at (0, 0) and its bottom right corner at (1, 1). Gradient parameters are then specified as percentages from 0 to 1. These values are extrapolated to actual box coordinates at runtime. It is possible specify values that lie outside the bounding box (-0.6 or 1.8, for instance).

Warning: The stops have to appear sorted in ascending order.

/* linear gradient from white to green */ QTextEdit < background: qlineargradient(x1:0, y1:0, x2:1, y2:1, stop:0 white, stop: 0.4 gray, stop:1 green) > /* linear gradient from white to green */ QTextEdit < background: qlineargradient(x1:0, y1:0, x2:1, y2:1, stop:0 white, stop: 0.4 rgba(10, 20, 30, 40), stop:1 rgb(0, 200, 230, 200)) > /* conical gradient from white to green */ QTextEdit < background: qconicalgradient(cx:0.5, cy:0.5, angle:30, stop:0 white, stop:1 #00FF00) > /* radial gradient from white to green */ QTextEdit < background: qradialgradient(cx:0, cy:0, radius: 1, fx:0.5, fy:0.5, stop:0 white, stop:1 green) >

* < file-icon: url(file.png), url(file_selected.png) selected; > QMessageBox < dialogbuttonbox-buttons-have-icons: true; dialog-ok-icon: url(ok.svg); dialog-cancel-icon: url(cancel.png), url(grayed_cancel.png) disabled; >

• px : pixels
• pt : the size of one point (i.e., 1/72 of an inch)
• em : the size relative to the font size of the element (e.g., 2em means 2 times the size of the font)
• ex : the x-height of the font (i.e., the height of ‘x’)

However, Qt is limited to font sizes in pt and px and any other size must be in px , em or ex .

• margin : The margin rectangle. The margin falls outside the border.
• border : The border rectangle. This is where any border is drawn.
• padding : The padding rectangle. Unlike the margins, padding is located inside the border.
• content : The content rectangle. This specifies where the actual contents go, excluding any padding, border, or margin.

• repeat-x : Repeat horizontally.
• repeat-y : Repeat vertically.
• repeat : Repeat horizontally and vertically.
• no-repeat : Don’t repeat.

List of Pseudo-States

The following pseudo-states are supported:

Pseudo-State	Description
:active	This state is set when the widget resides in an active window.
:adjoins-item	This state is set when the ::branch of a QTreeView is adjacent to an item.
:alternate	This state is set for every alternate row whe painting the row of a QAbstractItemView when QAbstractItemView::alternatingRowColors() is set to true.
:bottom	The item is positioned at the bottom. For example, a QTabBar that has its tabs positioned at the bottom.
:checked	The item is checked. For example, the checked state of QAbstractButton.
:closable	The items can be closed. For example, the QDockWidget has the QDockWidget::DockWidgetClosable feature turned on.
:closed	The item is in the closed state. For example, an non-expanded item in a QTreeView
:default	The item is the default. For example, a default QPushButton or a default action in a QMenu.
:disabled	The item is disabled.
:editable	The QComboBox is editable.
:edit-focus	The item has edit focus (See QStyle::State_HasEditFocus). This state is available only for Qt Extended applications.
:enabled	The item is enabled.
:exclusive	The item is part of an exclusive item group. For example, a menu item in a exclusive QActionGroup.
:first	The item is the first (in a list). For example, the first tab in a QTabBar.
:flat	The item is flat. For example, a flat QPushButton.
:floatable	The items can be floated. For example, the QDockWidget has the QDockWidget::DockWidgetFloatable feature turned on.
:focus	The item has input focus.
:has-children	The item has children. For example, an item in a QTreeView that has child items.
:has-siblings	The item has siblings. For example, an item in a QTreeView that siblings.
:horizontal	The item has horizontal orientation
:hover	The mouse is hovering over the item.
:indeterminate	The item has indeterminate state. For example, a QCheckBox or QRadioButton is partially checked.
:last	The item is the last (in a list). For example, the last tab in a QTabBar.
:left	The item is positioned at the left. For example, a QTabBar that has its tabs positioned at the left.
:maximized	The item is maximized. For example, a maximized QMdiSubWindow.
:middle	The item is in the middle (in a list). For example, a tab that is not in the beginning or the end in a QTabBar.
:minimized	The item is minimized. For example, a minimized QMdiSubWindow.
:movable	The item can be moved around. For example, the QDockWidget has the QDockWidget::DockWidgetMovable feature turned on.
:no-frame	The item has no frame. For example, a frameless QSpinBox or QLineEdit.
:non-exclusive	The item is part of a non-exclusive item group. For example, a menu item in a non-exclusive QActionGroup.
:off	For items that can be toggled, this applies to items in the «off» state.
:on	For items that can be toggled, this applies to widgets in the «on» state.
:only-one	The item is the only one (in a list). For example, a lone tab in a QTabBar.
:open	The item is in the open state. For example, an expanded item in a QTreeView, or a QComboBox or QPushButton with an open menu.
:next-selected	The next item (in a list) is selected. For example, the selected tab of a QTabBar is next to this item.
:pressed	The item is being pressed using the mouse.
:previous-selected	The previous item (in a list) is selected. For example, a tab in a QTabBar that is next to the selected tab.
:read-only	The item is marked read only or non-editable. For example, a read only QLineEdit or a non-editable QComboBox.
:right	The item is positioned at the right. For example, a QTabBar that has its tabs positioned at the right.
:selected	The item is selected. For example, the selected tab in a QTabBar or the selected item in a QMenu.
:top	The item is positioned at the top. For example, a QTabBar that has its tabs positioned at the top.
:unchecked	The item is unchecked.
:vertical	The item has vertical orientation.
:window	The widget is a window (i.e top level widget)

List of Sub-Controls

The following subcontrols are available:

Sub-Control	Description
::add-line	The button to add a line of a QScrollBar.
::add-page	The region between the handle (slider) and the add-line of a QScrollBar.
::branch	The branch indicator of a QTreeView.
::chunk	The progress chunk of a QProgressBar.
::close-button	The close button of a QDockWidget or tabs of QTabBar
::corner	The corner between two scrollbars in a QAbstractScrollArea
::down-arrow	The down arrow of a QComboBox, QHeaderView (sort indicator), QScrollBar or QSpinBox.
::down-button	The down button of a QScrollBar or a QSpinBox.
::drop-down	The drop-down button of a QComboBox.
::float-button	The float button of a QDockWidget
::groove	The groove of a QSlider.
::indicator	The indicator of a QAbstractItemView, a QCheckBox, a QRadioButton, a checkable QMenu item or a checkable QGroupBox.
::handle	The handle (slider) of a QScrollBar, a QSplitter, or a QSlider.
::icon	The icon of a QAbstractItemView or a QMenu.
::item	An item of a QAbstractItemView, a QMenuBar, a QMenu, or a QStatusBar.
::left-arrow	The left arrow of a QScrollBar.
::left-corner	The left corner of a QTabWidget. For example, this control can be used to control position the left corner widget in a QTabWidget.
::menu-arrow	The arrow of a QToolButton with a menu.
::menu-button	The menu button of a QToolButton.
::menu-indicator	The menu indicator of a QPushButton.
::right-arrow	The right arrow of a QMenu or a QScrollBar.
::pane	The pane (frame) of a QTabWidget.
::right-corner	The right corner of a QTabWidget. For example, this control can be used to control the position the right corner widget in a QTabWidget.
::scroller	The scroller of a QMenu or QTabBar.
::section	The section of a QHeaderView.
::separator	The separator of a QMenu or in a QMainWindow.
::sub-line	The button to subtract a line of a QScrollBar.
::sub-page	The region between the handle (slider) and the sub-line of a QScrollBar.
::tab	The tab of a QTabBar or QToolBox.
::tab-bar	The tab bar of a QTabWidget. This subcontrol exists only to control the position of the QTabBar inside the QTabWidget. To style the tabs using the ::tab subcontrol.
::tear	The tear indicator of a QTabBar.
::tearoff	The tear-off indicator of a QMenu.
::text	The text of a QAbstractItemView.
::title	The title of a QGroupBox or a QDockWidget.
::up-arrow	The up arrow of a QHeaderView (sort indicator), QScrollBar or a QSpinBox.
::up-button	The up button of a QSpinBox.

See Customizing the QPushButton’s Menu Indicator Sub-Control for an example of how to customize a subcontrol.

© 2023 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.