1// Copyright (C) 2019 The Qt Company Ltd.
2// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
7 \brief How to use style sheets to customize the appearance of widgets.
9 \ingroup frameworks-technologies
10 \ingroup qt-basic-concepts
11 \ingroup qt-gui-concepts
13 \previouspage {Styles and Style Aware Widgets}{Styles}
14 \nextpage The Style Sheet Syntax
19 Qt Style Sheets are a powerful mechanism that allows you to
20 customize the appearance of widgets, in addition to what is
21 already possible by subclassing QStyle. The concepts,
22 terminology, and syntax of Qt Style Sheets are heavily inspired
23 by HTML \l{http://www.w3.org/Style/CSS/}{Cascading Style Sheets
24 (CSS)} but adapted to the world of widgets.
30 \li \l{The Style Sheet Syntax}
31 \li \l{Qt Widgets Designer Integration}
32 \li \l{Customizing Qt Widgets Using Style Sheets}
33 \li \l{Qt Style Sheets Reference}
34 \li \l{Qt Style Sheets Examples}
37 \note If Qt Style Sheets are used on the same widget as functions that
38 set the appearance of widgets, such as \l QWidget::setFont() or
39 \l QTreeWidgetItem::setBackground(), style sheets will take precedence
40 if the settings conflict.
45 Styles sheets are textual specifications that can be set on the
46 whole application using QApplication::setStyleSheet() or on a
47 specific widget (and its children) using
48 QWidget::setStyleSheet(). If several style sheets are set at
49 different levels, Qt derives the effective style sheet from all
50 of those that are set. This is called cascading.
52 For example, the following style sheet specifies that all
53 \l{QLineEdit}s should use yellow as their background color, and
54 all \l{QCheckBox}es should use red as the text color:
56 \snippet code/doc_src_stylesheet.qdoc 0
58 For this kind of customization, style sheets are much more
59 powerful than QPalette. For example, it might be tempting to set
60 the QPalette::Button role to red for a QPushButton to obtain a
61 red push button. However, this wasn't guaranteed to work for all
62 styles, because style authors are restricted by the different
63 platforms' guidelines and (on Windows and \macos) by the
66 Style sheets let you perform all kinds of customizations that are
67 difficult or impossible to perform using QPalette alone. If you
68 want yellow backgrounds for mandatory fields, red text for
69 potentially destructive push buttons, or fancy check boxes, style
70 sheets are the answer.
72 Style sheets are applied on top of the current \l{QStyle}{widget
73 style}, meaning that your applications will look as native as
74 possible, but any style sheet constraints will be taken into
75 consideration. Unlike palette fiddling, style sheets offer
76 guarantees: If you set the background color of a QPushButton to be
77 red, you can be assured that the button will have a red background
78 in all styles, on all platforms. In addition, \QD
79 provides style sheet integration, making it easy to view the effects
80 of a style sheet in different \l{QStyle}{widget styles}.
82 In addition, style sheets can be used to provide a distinctive
83 look and feel for your application, without having to subclass
84 QStyle. For example, you can specify arbitrary images for radio
85 buttons and check boxes to make them stand out. Using this
86 technique, you can also achieve minor customizations that would
87 normally require subclassing several style classes, such as
88 specifying a \l{QStyle::styleHint()}{style hint}.
90 When a style sheet is active, the QStyle returned by QWidget::style()
91 is a wrapper "style sheet" style, \e not the platform-specific style. The
92 wrapper style ensures that any active style sheet is respected and
93 otherwise forwards the drawing operations to the underlying,
94 platform-specific style (e.g., QWindowsVistaStyle on Windows).
96 Since Qt 4.5, Qt style sheets fully supports \macos.
101 \page stylesheet-syntax.html
102 \previouspage Qt Style Sheets
103 \nextpage Qt Widgets Designer Integration
104 \title The Style Sheet Syntax
106 Qt Style Sheet terminology and syntactic rules are almost
107 identical to those of HTML CSS. If you already know CSS, you can
108 probably skim quickly through this section.
112 \section1 Style Rules
114 Style sheets consist of a sequence of style rules. A \e{style
115 rule} is made up of a selector and a declaration. The
116 \e{selector} specifies which widgets are affected by the rule;
117 the \e{declaration} specifies which properties should be set on
118 the widget. For example:
120 \snippet code/doc_src_stylesheet.qdoc 1
122 In the above style rule, \c QPushButton is the selector and \c{{
123 color: red }} is the declaration. The rule specifies that
124 QPushButton and its subclasses (e.g., \c MyPushButton) should use
125 red as their foreground color.
127 Qt Style Sheet is generally case insensitive (i.e., \c color,
128 \c Color, \c COLOR, and \c cOloR refer to the same property).
129 The only exceptions are class names,
130 \l{QObject::setObjectName()}{object names}, and Qt property
131 names, which are case sensitive.
133 Several selectors can be specified for the same declaration,
134 using commas (\c{,}) to separate the selectors. For example,
137 \snippet code/doc_src_stylesheet.qdoc 2
139 is equivalent to this sequence of three rules:
141 \snippet code/doc_src_stylesheet.qdoc 3
143 The declaration part of a style rule is a list of
144 \tt{\e{property}: \e{value}} pairs, enclosed in braces (\c{{}})
145 and separated with semicolons. For example:
147 \snippet code/doc_src_stylesheet.qdoc 4
149 See the \l{List of Properties} section below for the list of
150 properties provided by Qt widgets.
152 \section1 Selector Types
154 All the examples so far used the simplest type of selector, the
155 Type Selector. Qt Style Sheets support all the
156 \l{http://www.w3.org/TR/REC-CSS2/selector.html#q1}{selectors
157 defined in CSS2}. The table below summarizes the most useful
167 \li Universal Selector
169 \li Matches all widgets.
174 \li Matches instances of QPushButton and of its subclasses.
177 \li Property Selector
178 \li \c{QPushButton[flat="false"]}
179 \li Matches instances of QPushButton that are not
180 \l{QPushButton::}{flat}. You may use this selector to test
181 for any Qt \l{Qt's Property System}{property} that supports
182 QVariant::toString() (see the \l{QVariant::}{toString()}
183 function documentation for details). In addition, the
184 special \c class property is supported, for the name of the
187 This selector may also be used to test dynamic properties.
188 For more information on customization using dynamic properties,
189 refer to \l{Customizing Using Dynamic Properties}.
191 Instead of \c =, you can also use \c ~= to test whether a
192 Qt property of type QStringList contains a given QString.
194 \warning If the value of the Qt property changes after the
195 style sheet has been set, it might be necessary to force a
196 style sheet recomputation. One way to achieve this is to
197 unset the style sheet and set it again.
202 \li Matches instances of QPushButton, but not of its subclasses.
204 This is equivalent to \c{*[class~="QPushButton"]}.
207 \li ID \target ID Selector
209 \li \c{QPushButton#okButton}
210 \li Matches all QPushButton instances whose
211 \l{QObject::objectName}{object name} is \c okButton.
214 \li Descendant Selector
215 \li \c{QDialog QPushButton}
216 \li Matches all instances of QPushButton that are descendants
217 (children, grandchildren, etc.) of a QDialog.
221 \li \c{QDialog > QPushButton}
222 \li Matches all instances of QPushButton that are direct
223 children of a QDialog.
226 \section1 Sub-Controls
228 For styling complex widgets, it is necessary to access subcontrols of the
229 widget, such as the drop-down button of a QComboBox or the up and down
230 arrows of a QSpinBox. Selectors may contain \e{subcontrols} that make it
231 possible to restrict the application of a rule to specific widget
232 subcontrols. For example:
234 \snippet code/doc_src_stylesheet.qdoc 5
236 The above rule styles the drop-down button of all \l{QComboBox}es.
237 Although the double-colon (\c{::}) syntax is reminiscent of CSS3
238 Pseudo-Elements, Qt Sub-Controls differ conceptually from these and have
239 different cascading semantics.
241 Sub-controls are always positioned with respect to another element - a
242 reference element. This reference element could be the widget or another
243 Sub-control. For example, the \l{Qt Style Sheets Reference#drop-down-sub}
244 {::drop-down} of a QComboBox is placed, by default, in the top right corner
245 of the Padding rectangle of the QComboBox. The
246 \l{Qt Style Sheets Reference#drop-down-sub}{::drop-down} is placed,
247 by default, in the Center of the Contents rectangle of the
248 \l{Qt Style Sheets Reference#drop-down-sub}{::drop-down} Sub-control. See
249 the \l{List of Stylable Widgets} below for the Sub-controls to use to
250 style a widget and their default positions.
252 The origin rectangle to be used can be changed using the
253 \l{Qt Style Sheets Reference#subcontrol-origin-prop}{subcontrol-origin}
254 property. For example, if we want to place the drop-down in the margin
255 rectangle of the QComboBox instead of the default Padding rectangle, we
258 \snippet code/doc_src_stylesheet.qdoc 6
260 The alignment of the drop-down within the Margin rectangle is changed
261 using \l{Qt Style Sheets Reference#subcontrol-position-prop}
262 {subcontrol-position} property.
264 The \l{Qt Style Sheets Reference#width-prop}{width} and
265 \l{Qt Style Sheets Reference#height-prop}{height} properties can be used
266 to control the size of the Sub-control. Note that setting a
267 \l{Qt Style Sheets Reference#image-prop}{image} implicitly sets the size
270 The relative positioning scheme
271 (\l{Qt Style Sheets Reference#position-prop}{position} : relative),
272 allows the position of the Sub-Control to be offset from its initial
273 position. For example, when the QComboBox's drop-down button is
274 pressed, we might like the arrow inside to be offset to give a
275 "pressed" effect. To achieve this, we can specify:
277 \snippet code/doc_src_stylesheet.qdoc 7
279 The absolute positioning scheme
280 (\l{Qt Style Sheets Reference#position-prop}{position} : absolute),
281 allows the position and size of the Sub-control to be changed with
282 respect to the reference element.
284 Once positioned, they are treated the same as widgets and can be styled
285 using the \l{box model}.
287 See the \l{List of Sub-Controls} below for a list of supported
288 sub-controls, and \l{Customizing the QPushButton's Menu Indicator
289 Sub-Control} for a realistic example.
291 \note With complex widgets such as QComboBox and QScrollBar, if one
292 property or sub-control is customized, \b{all} the other properties or
293 sub-controls must be customized as well.
295 \section1 Pseudo-States
297 Selectors may contain \e{pseudo-states} that denote that restrict
298 the application of the rule based on the widget's state.
299 Pseudo-states appear at the end of the selector, with a colon
300 (\c{:}) in between. For example, the following rule applies when
301 the mouse hovers over a QPushButton:
303 \snippet code/doc_src_stylesheet.qdoc 8
305 Pseudo-states can be negated using the exclamation operator. For
306 example, the following rule applies when the mouse does not hover
309 \snippet code/doc_src_stylesheet.qdoc 9
311 Pseudo-states can be chained, in which case a logical AND is
312 implied. For example, the following rule applies to when the
313 mouse hovers over a checked QCheckBox:
315 \snippet code/doc_src_stylesheet.qdoc 10
317 Negated Pseudo-states may appear in Pseudo-state chains. For example,
318 the following rule applies when the mouse hovers over a QPushButton
321 \snippet code/doc_src_stylesheet.qdoc 11
323 If needed, logical OR can be expressed using the comma operator:
325 \snippet code/doc_src_stylesheet.qdoc 12
327 Pseudo-states can appear in combination with subcontrols. For
330 \snippet code/doc_src_stylesheet.qdoc 13
332 See the \l{List of Pseudo-States} section below for the list of
333 pseudo-states provided by Qt widgets.
335 \section1 Conflict Resolution
337 Conflicts arise when several style rules specify the same
338 properties with different values. Consider the following style
341 \snippet code/doc_src_stylesheet.qdoc 14
343 Both rules match QPushButton instances called \c okButton and
344 there is a conflict for the \c color property. To resolve this
345 conflict, we must take into account the \e specificity of the
346 selectors. In the above example, \c{QPushButton#okButton} is
347 considered more specific than \c QPushButton, because it
348 (usually) refers to a single object, not to all instances of a
351 Similarly, selectors with pseudo-states are more specific than
352 ones that do not specify pseudo-states. Thus, the following style
353 sheet specifies that a \l{QPushButton} should have white text
354 when the mouse is hovering over it, otherwise red text:
356 \snippet code/doc_src_stylesheet.qdoc 15
360 \snippet code/doc_src_stylesheet.qdoc 16
362 Here, both selectors have the same specificity, so if the mouse
363 hovers over the button while it is enabled, the second rule takes
364 precedence. If we want the text to be white in that case, we can
365 reorder the rules like this:
367 \snippet code/doc_src_stylesheet.qdoc 17
369 Alternatively, we can make the first rule more specific:
371 \snippet code/doc_src_stylesheet.qdoc 18
373 A similar issue arises in conjunction with Type Selectors.
374 Consider the following example:
376 \snippet code/doc_src_stylesheet.qdoc 19
378 Both rules apply to QPushButton instances (since QPushButton
379 inherits QAbstractButton) and there is a conflict for the
380 \l{Qt Style Sheets Reference#color-prop}{color} property. Because QPushButton
381 inherits QAbstractButton, it might be tempting to assume that
382 \c QPushButton is more specific than \c QAbstractButton. However,
383 for style sheet computations, all Type Selectors have the same
384 specificity, and the rule that appears last takes precedence. In
385 other words, \l{Qt Style Sheets Reference#color-prop}{color} is set to \c gray
386 for all \l{QAbstractButton}s, including \l{QPushButton}s. If we really
387 want \l{QPushButton}s to have red text, we can always reorder the
390 For determining the specificity of a rule, Qt Style Sheets follow
392 \l{http://www.w3.org/TR/REC-CSS2/cascade.html#specificity}{CSS2
396 \e{A selector's specificity is calculated as follows:}
399 \li \e{count the number of ID attributes in the selector (= a)}
400 \li \e{count the number of other attributes and pseudo-classes in the selector (= b)}
401 \li \e{count the number of element names in the selector (= c)}
402 \li \e{ignore pseudo-elements [i.e., \l{subcontrols}].}
405 \e{Concatenating the three numbers a-b-c (in a number system with a
406 large base) gives the specificity.}
410 \snippet code/doc_src_stylesheet.qdoc 20
415 Style sheets can be set on the QApplication, on parent widgets,
416 and on child widgets. An arbitrary widget's effective style sheet
417 is obtained by merging the style sheets set on the widget's
418 ancestors (parent, grandparent, etc.), as well as any style sheet
419 set on the QApplication.
421 When conflicts arise, the widget's own style sheet is always
422 preferred to any inherited style sheet, irrespective of the
423 specificity of the conflicting rules. Likewise, the parent
424 widget's style sheet is preferred to the grandparent's, etc.
426 One consequence of this is that setting a style rule on a widget
427 automatically gives it precedence over other rules specified in
428 the ancestor widgets' style sheets or the QApplication style
429 sheet. Consider the following example. First, we set a style
430 sheet on the QApplication:
432 \snippet code/doc_src_stylesheet.cpp 21
434 Then we set a style sheet on a QPushButton object:
436 \snippet code/doc_src_stylesheet.cpp 22
438 The style sheet on the QPushButton forces the QPushButton (and
439 any child widget) to have blue text, in spite of the more
440 specific rule set provided by the application-wide style sheet.
442 The result would have been the same if we had written
444 \snippet code/doc_src_stylesheet.cpp 23
446 except that if the QPushButton had children (which is unlikely),
447 the style sheet would have no impact on them.
449 Style sheet cascading is a complex topic. Refer to the
450 \l{http://www.w3.org/TR/CSS2/cascade.html#cascade}{CSS2
451 Specification} for the gory details. Be aware that Qt currently
452 doesn't implement \c{!important}.
454 \section1 Inheritance
456 In classic CSS, when font and color of an item is not explicitly set,
457 it gets automatically inherited from the parent. By default, when using
458 Qt Style Sheets, a widget does \b{not} automatically inherit its font
459 and color setting from its parent widget.
461 For example, consider a QPushButton inside a QGroupBox:
463 \snippet code/doc_src_stylesheet.cpp 24
465 The QPushButton does not have an explicit color set. Hence, instead
466 of inheriting color of its parent QGroupBox, it has the system color.
467 If we want to set the color on a QGroupBox and its children,
470 \snippet code/doc_src_stylesheet.cpp 25
472 In contrast, setting a font and palette using QWidget::setFont() and
473 QWidget::setPalette() propagates to child widgets.
475 If you would prefer that the font and palette propagate to child widgets,
476 you can set the Qt::AA_UseStyleSheetPropagationInWidgetStyles flag, like
480 \snippet code/doc_src_stylesheet.cpp 96
482 When the widget-style font and palette propagation is enabled, font and
483 palette changes made through Qt Style Sheets will behave as if the user
484 had manually called the corresponding QWidget::setPalette() and
485 QWidget::setFont() methods on all of the QWidgets targeted by the style
489 \li Changes made by a style sheet are propagated.
490 They are pushed to all widgets matching the style sheet once, at the time
492 \li Changes made by calling QWidget::setPalette() or QWidget::setFont() are
494 They are inherited by all existing and future children, where the respective
495 brush or font hasn't been explicitly set.
498 \section1 Widgets Inside C++ Namespaces
500 The Type Selector can be used to style widgets of a particular type. For
503 \snippet code/doc_src_stylesheet.cpp 26
505 Qt Style Sheet uses QObject::className() of the widget to determine
506 when to apply the Type Selector. When custom widgets are inside namespaces,
507 the QObject::className() returns <namespace>::<classname>. This conflicts
508 with the syntax for \l{Sub-Controls}. To overcome this problem,
509 when using the Type Selector for widgets inside namespaces, we must
510 replace the \c{::} with \c{--}. For example,
512 \snippet code/doc_src_stylesheet.cpp 27
514 \section1 Setting QObject Properties
516 From 4.3 and above, any designable Q_PROPERTY
517 can be set using the qproperty-<property name> syntax.
520 \snippet code/doc_src_stylesheet.qdoc 28
522 If the property references an enum declared with Q_ENUM, you should
523 reference its constants by name, not their numeric value.
525 \note Use the qproperty syntax with care, as it modifies the
526 widget that is being painted. Also, the qproperty syntax is evaluated only
527 once, which is when the widget is polished by the style. This means that any
528 attempt to use them in pseudo-states such as QPushButton:hover, will not work.
532 \page stylesheet-designer.html
533 \previouspage The Style Sheet Syntax
534 \nextpage Customizing Qt Widgets Using Style Sheets
535 \title Qt Widgets Designer Integration
537 \l{Qt Widgets Designer Manual}{\QD} is an excellent tool
538 to preview style sheets. You can right-click on any widget in Designer
539 and select \uicontrol{Change styleSheet...} to set the style sheet.
541 \image designer-stylesheet-options.png
543 In Qt 4.2 and later, \QD also includes a
544 style sheet syntax highlighter and validator. The validator indicates
545 if the syntax is valid or invalid, at the bottom left of the \uicontrol{Edit
548 \image designer-validator-highlighter.png
550 When you click \uicontrol{OK} or \uicontrol{Apply}, \QD will automatically display
551 the widget with its new stylesheet.
553 \image designer-stylesheet-usage.png
557 \page stylesheet-customizing.html
558 \previouspage Qt Widgets Designer Integration
559 \nextpage Qt Style Sheets Reference
560 \title Customizing Qt Widgets Using Style Sheets
562 When using style sheets, every widget is treated as a box with four
563 concentric rectangles: the margin rectangle, the border rectangle, the
564 padding rectangle, and the content rectangle. The box model describes
565 this in further detail.
570 \section1 The Box Model
572 The four concentric rectangles appear conceptually as below:
574 \image stylesheet-boxmodel.png
577 \li The margin falls outside the border.
578 \li The border is drawn between the margin and the padding.
579 \li The padding falls inside the border, between the border and
581 \li The content is what is left from the original widget or
582 subcontrol once we have removed the margin, the border, and
586 The \l{Qt Style Sheets Reference#margin-prop}{margin},
587 \l{Qt Style Sheets Reference#border-width-prop}
589 \l{Qt Style Sheets Reference#padding-prop}{padding}
590 properties all default to zero. In that case, all four rectangles
591 (\c margin, \c border, \c padding, and \c content) coincide exactly.
593 You can specify a background for the widget using the
594 \l{Qt Style Sheets Reference#background-image-prop}{background-image}
595 property. By default, the background-image is drawn only for the area
596 inside the border. This can be changed using the
597 \l{Qt Style Sheets Reference#background-clip-prop}{background-clip}
598 property. You can use
599 \l{Qt Style Sheets Reference#background-repeat-prop}{background-repeat}
601 \l{Qt Style Sheets Reference#background-origin-prop}{background-origin}
602 to control the repetition and origin of the background image.
604 A background-image does not scale with the size of the widget. To provide
605 a "skin" or background that scales along with the widget size, one must
607 \l{Qt Style Sheets Reference#border-image-prop}{border-image}. Since the
608 border-image property provides an alternate background, it is not required
609 to specify a background-image when border-image is specified. In the case,
610 when both of them are specified, the border-image draws over the
613 In addition, the \l{Qt Style Sheets Reference#image-prop}{image} property
614 may be used to draw an image over the border-image. The image specified does
615 not tile or stretch and when its size does not match the size of the widget,
616 its alignment is specified using the
617 \l{Qt Style Sheets Reference#image-position-prop}{image-position}
618 property. Unlike background-image and border-image, one may specify a
619 SVG in the image property, in which case the image is scaled automatically
620 according to the widget size.
622 The steps to render a rule are as follows:
624 \li Set clip for entire rendering operation (border-radius)
625 \li Draw the background (background-image)
626 \li Draw the border (border-image, border)
627 \li Draw overlay image (image)
631 \section1 Sub-controls
633 A widget is considered as a hierarchy (tree) of subcontrols drawn on top
634 of each other. For example, the QComboBox draws the drop-down sub-control
635 followed by the down-arrow sub-control. A QComboBox is thus rendered as
638 \li Render the QComboBox { } rule
639 \li Render the QComboBox::drop-down { } rule
640 \li Render the QComboBox::down-arrow { } rule
643 Sub-controls share a parent-child relationship. In the case of QComboBox,
644 the parent of down-arrow is the drop-down and the parent of drop-down is
645 the widget itself. Sub-controls are positioned within their parent using
646 the \l{Qt Style Sheets Reference#subcontrol-position-prop}
647 {subcontrol-position} and
648 \l{Qt Style Sheets Reference#subcontrol-origin-prop}{subcontrol-origin}
651 Once positioned, sub-controls can be styled using the \l{box model}.
653 \note With complex widgets such as QComboBox and QScrollBar, if one
654 property or sub-control is customized, \b{all} the other properties or
655 sub-controls must be customized as well.
660 \page stylesheet-reference.html
661 \previouspage Customizing Qt Widgets Using Style Sheets
662 \nextpage Qt Style Sheets Examples
663 \title Qt Style Sheets Reference
665 Qt Style Sheets support various properties, pseudo-states, and
666 subcontrols that make it possible to customize the look of
671 \section1 List of Stylable Widgets
673 The following table lists the Qt widgets that can be customized
682 \li QAbstractScrollArea \target qabstractscrollarea-widget
683 \li Supports the \l{box model}.
686 All derivatives of QAbstractScrollArea, including QTextEdit,
687 and QAbstractItemView (all item view classes), support
688 scrollable backgrounds using
689 \l{Qt Style Sheets Reference#background-attachment-prop}
690 {background-attachment}. Setting the background-attachment to
691 \c{fixed} provides a background-image that does not scroll with the
692 viewport. Setting the background-attachment to \c{scroll}, scrolls
693 the background-image when the scroll bars move.
696 See \l{Qt Style Sheets Examples#Customizing QAbstractScrollArea}
697 {Customizing QAbstractScrollArea} for an example.
700 \li QCheckBox \target qcheckbox-widget
701 \li Supports the \l{box model}. The check indicator can be
702 styled using the \l{#indicator-sub}{::indicator}
703 subcontrol. By default, the indicator is placed in the Top
704 Left corner of the Contents rectangle of the widget.
707 The \l{#spacing-prop}{spacing} property
708 specifies the spacing between the check indicator and
712 See \l{Qt Style Sheets Examples#Customizing QCheckBox}
713 {Customizing QCheckBox} for an example.
716 \li QColumnView \target qcolumnview-widget
717 \li The grip can be styled by using the \l{image-prop}{image} property.
720 The arrow indicators can by styled using the
721 \l{left-arrow-sub}{::left-arrow} subcontrol and the
722 \l{right-arrow-sub}{::right-arrow} subcontrol.
725 \li QComboBox \target qcombobox-widget
726 \li The frame around the combobox can be styled using the
730 The drop-down button can be styled using
731 the \l{#drop-down-sub}{::drop-down} subcontrol. By default, the
732 drop-down button is placed in the top right corner of the padding
733 rectangle of the widget.
736 The arrow mark inside the drop-down button
737 can be styled using the \l{#down-arrow-sub}{::down-arrow}
738 subcontrol. By default, the arrow is placed in the center of the
739 contents rectangle of the drop-down subcontrol.
742 The color of the placeholder text can be set using the
743 \l{#placeholder-text-color-prop}{placeholder-text-color} property.
746 See \l{Qt Style Sheets Examples#Customizing QComboBox}{Customizing QComboBox}
750 \li QDateEdit \target qdateedit-widget
751 \li See \l{#qspinbox-widget}{QSpinBox}.
754 \li QDateTimeEdit \target qdatetimeedit-widget
755 \li See \l{#qspinbox-widget}{QSpinBox}.
758 \li QDialog \target qdialog-widget
759 \li Supports only the \l{Qt Style Sheets Reference#background-prop}{background},
760 \l{#background-clip-prop}{background-clip} and
761 \l{#background-origin-prop}{background-origin} properties.
763 \warning Make sure you define the Q_OBJECT macro for your custom
767 \li QDialogButtonBox \target qdialogbuttonbox-widget
768 \li The layout of buttons can be altered using the
769 \l{#button-layout-prop}{button-layout} property.
772 \li QDockWidget \target qdockwidget-widget
773 \li Supports styling of the title bar and the title bar buttons when docked.
776 The dock widget border can be styled using the \l{#border-prop}{border}
777 property. The \l{#title-sub}{::title} subcontrol can be used to customize
778 the title bar. The close and float buttons are positioned with respect
779 to the \l{title-sub}{::title} subcontrol using the
780 \l{#close-button-sub}{::close-button} and
781 \l{#float-button-sub}{::float-button} respectively.
784 When the title bar is vertical, the \l{#vertical-ps}{:vertical} pseudo
785 class is set. In addition, depending on QDockWidget::DockWidgetFeature,
786 the \l{#closable-ps}{:closable}, \l{#floatable-ps}{:floatable} and
787 \l{#movable-ps}{:movable} pseudo states are set.
789 \note Use QMainWindow::separator to style the resize handle.
791 \warning The style sheet has no effect when the QDockWidget is undocked
792 as Qt uses native top level windows when undocked.
794 See \l{Qt Style Sheets Examples#Customizing QDockWidget}
795 {Customizing QDockWidget} for an example.
798 \li QDoubleSpinBox \target qdoublespinbox-widget
799 \li See \l{#qspinbox-widget}{QSpinBox}.
802 \li QFrame \target qframe-widget
803 \li Supports the \l{box model}.
806 Since 4.3, setting a stylesheet on a QLabel automatically
807 sets the QFrame::frameStyle property to QFrame::StyledPanel.
810 See \l{Qt Style Sheets Examples#Customizing QFrame}{Customizing QFrame}
814 \li QGroupBox \target qgroupbox-widget
815 \li Supports the \l{box model}.
818 The title can be styled using the
819 \l{#title-sub}{::title} subcontrol. By default, the title is placed
820 depending on QGroupBox::textAlignment.
823 In the case of a checkable QGroupBox, the title includes the
824 check indicator. The indicator is styled using the
825 \l{#indicator-sub}{::indicator} subcontrol. The
826 \l{#spacing-prop}{spacing} property can be used to control
827 the spacing between the text and indicator.
830 See \l{Qt Style Sheets Examples#Customizing QGroupBox}{Customizing QGroupBox}
834 \li QHeaderView \target qheaderview-widget
835 \li Supports the \l{box model}.
838 The sections of the header view are
839 styled using the \l{#section-sub}{::section} sub control. The
840 \c{section} Sub-control supports the \l{#middle-ps}{:middle},
841 \l{#first-ps}{:first}, \l{#last-ps}{:last},
842 \l{#only-one-ps}{:only-one}, \l{#next-selected-ps}{:next-selected},
843 \l{#previous-selected-ps}{:previous-selected},
844 \l{#selected-ps}{:selected},
845 and \l{#checked-ps}{:checked} pseudo states.
848 The sort indicator can be styled using the
849 \l{#up-arrow-sub}{::up-arrow} and the
850 \l{#down-arrow-sub}{::down-arrow} Sub-control.
853 See \l{Qt Style Sheets Examples#Customizing QHeaderView}{Customizing QHeaderView}
857 \li QLabel \target qlabel-widget
858 \li Supports the \l{box model}. Does not support the
859 \l{#hover-ps}{:hover} pseudo-state.
862 Since 4.3, setting a stylesheet on a QLabel automatically
863 sets the QFrame::frameStyle property to QFrame::StyledPanel.
866 See \l{Qt Style Sheets Examples#Customizing QFrame}{Customizing QFrame} for an
867 example (a QLabel derives from QFrame).
870 \li QLineEdit \target qlineedit-widget
871 \li Supports the \l{box model}.
874 The color and background of the selected item is styled using
875 \l{#selection-color-prop}{selection-color} and
876 \l{#selection-background-color-prop}{selection-background-color}
880 The color of the placeholder text can be set using the
881 \l{#placeholder-text-color-prop}{placeholder-text-color} property.
884 The password character can be styled using the
885 \l{#lineedit-password-character-prop}{lineedit-password-character}
889 The password mask delay can be changed using the
890 \l{#lineedit-password-mask-delay-prop}{lineedit-password-mask-delay}
893 See \l{Qt Style Sheets Examples#Customizing QLineEdit}{Customizing QLineEdit}
897 \li QListView \target qlistview-widget
898 \li Supports the \l{box model}.
902 \l{QAbstractItemView::alternatingRowColors}{alternating row colors}
903 is enabled, the alternating colors can be styled using the
904 \l{#alternate-background-color-prop}{alternate-background-color}
908 The color and background of the selected item is styled using
909 \l{#selection-color-prop}{selection-color} and
910 \l{#selection-background-color-prop}{selection-background-color}
914 The selection behavior is controlled by the
915 \l{#show-decoration-selected-prop}{show-decoration-selected} property.
918 Use the \l{#item-sub}{::item} subcontrol for more fine grained
919 control over the items in the QListView.
922 See \l{qabstractscrollarea-widget}{QAbsractScrollArea} to
923 style scrollable backgrounds.
926 See \l{Qt Style Sheets Examples#Customizing QListView}
927 {Customzing QListView} for an example.
930 \li QListWidget \target qlistwidget-widget
931 \li See \l{#qlistview-widget}{QListView}.
934 \li QMainWindow \target qmainwindow-widget
935 \li Supports styling of the separator.
938 The separator in a QMainWindow when using QDockWidget is styled
939 using the \l{#separator-sub}{::separator} subcontrol.
942 See \l{Qt Style Sheets Examples#Customizing QMainWindow}{Customizing QMainWindow}
946 \li QMenu \target qmenu-widget
947 \li Supports the \l{box model}.
950 Individual items are styled using the \l{#item-sub}{::item}
951 subcontrol. In addition to the usually supported pseudo states,
952 \c{item} subcontrol supports the
953 \l{#selected-ps}{:selected}, \l{#default-ps}{:default},
954 \l{#exclusive-ps}{:exclusive} and the
955 \l{#non-exclusive-ps}{non-exclusive} pseudo states.
958 The indicator of checkable menu items is styled using the
959 \l{#indicator-sub}{::indicator} subcontrol.
962 The separator is styled using the \l{#separator-sub}{::separator}
966 For items with a sub menu, the arrow marks are styled using the
967 \l{right-arrow-sub}{right-arrow} and
968 \l{left-arrow-sub}{left-arrow}.
971 The scroller is styled using the \l{#scroller-sub}{::scroller}.
974 The tear-off is styled using the \l{#tearoff-sub}{::tearoff}.
977 See \l{Qt Style Sheets Examples#Customizing QMenu}{Customizing QMenu}
981 \li QMenuBar \target qmenubar-widget
982 \li Supports the \l{box model}.
985 The \l{#spacing-prop}{spacing}
986 property specifies the spacing between menu items.
987 Individual items are styled using the \l{#item-sub}{::item}
990 \warning When running on Qt/Mac, the menu bar is usually embedded into the
991 system-wide menu bar. In this case, the style sheet will have no effect.
993 See \l{Qt Style Sheets Examples#Customizing QMenuBar}{Customizing QMenuBar}
997 \li QMessageBox \target qmessagebox-widget
998 \li The \l{#messagebox-text-interaction-flags-prop}
999 {messagebox-text-interaction-flags} property can be used to alter
1000 the interaction with text in the message box.
1003 \li QProgressBar \target qprogressbar-widget
1004 \li Supports the \l{box model}.
1007 The chunks of the progress bar
1008 can be styled using the \l{#chunk-sub}{::chunk} subcontrol.
1009 The chunk is displayed on the Contents rectangle of the widget.
1012 If the progress bar displays text, use the \l{text-align-prop}{text-align}
1013 property to position the text.
1016 Indeterminate progress bars have the
1017 \l{#indeterminate-ps}{:indeterminate} pseudo state set.
1020 See \l{Qt Style Sheets Examples#Customizing QProgressBar}{Customizing QProgressBar}
1024 \li QPushButton \target qpushbutton-widget
1025 \li Supports the \l{box model}.
1028 Supports the \l{#default-ps}{:default},
1029 \l{#flat-ps}{:flat}, \l{#checked-ps}{:checked} pseudo states.
1032 Since 5.15, the \l{#icon-prop}{icon} property can be set to
1033 override the button icon.
1036 For QPushButton with a menu, the menu indicator is styled
1037 using the \l{#menu-indicator-sub}{::menu-indicator}
1038 subcontrol. Appearance of checkable push buttons can be
1039 customized using the \l{#open-ps}{:open} and
1040 \l{#closed-ps}{:closed} pseudo-states.
1042 \warning If you only set a background-color on a QPushButton, the background
1043 may not appear unless you set the border property to some value. This is
1044 because, by default, the QPushButton draws a native border which completely
1045 overlaps the background-color. For example,
1047 \snippet code/doc_src_stylesheet.qdoc 30
1049 See \l{Qt Style Sheets Examples#Customizing QPushButton}{Customizing QPushButton}
1053 \li QRadioButton \target qradiobutton-widget
1054 \li Supports the \l{box model}.
1057 The check indicator can be
1058 styled using the \l{#indicator-sub}{::indicator}
1059 subcontrol. By default, the indicator is placed in the Top
1060 Left corner of the Contents rectangle of the widget.
1063 The \l{#spacing-prop}{spacing} property
1064 specifies the spacing between the check indicator and
1068 See \l{Qt Style Sheets Examples#Customizing QRadioButton}
1069 {Customizing QRadioButton} for an example.
1072 \li QScrollBar \target qscrollbar-widget
1073 \li Supports the \l{box model}.
1076 The Contents rectangle of the widget
1077 is considered to be the groove over which the slider moves. The extent
1078 of the QScrollBar (i.e the width or the height depending on the orientation)
1079 is set using the \l{#width-prop}{width} or \l{#height-prop}{height} property
1080 respectively. To determine the orientation, use the
1081 \l{#horizontal-ps}{:horizontal} and the \l{vertical-ps}{:vertical}
1085 The slider can be styled using the \l{#handle-sub}{::handle} subcontrol.
1086 Setting the \l{#min-width-prop}{min-width} or \l{#min-height-prop}{min-height}
1087 provides size constraints for the slider depending on the orientation.
1090 The \l{add-line-sub}{::add-line} subcontrol can be used to style the
1091 button to add a line. By default, the add-line subcontrol is placed in
1092 top right corner of the Border rectangle of the widget. Depending on the
1093 orientation the \l{#right-arrow-sub}{::right-arrow} or
1094 \l{#down-arrow-sub}{::down-arrow}. By default, the arrows are placed in
1095 the center of the Contents rectangle of the add-line subcontrol.
1098 The \l{sub-line-sub}{::sub-line} subcontrol can be used to style the
1099 button to subtract a line. By default, the sub-line subcontrol is placed in
1100 bottom right corner of the Border rectangle of the widget. Depending on the
1101 orientation the \l{#left-arrow-sub}{::left-arrow} or
1102 \l{#up-arrow-sub}{::up-arrow}. By default, the arrows are placed in
1103 the center of the Contents rectangle of the sub-line subcontrol.
1106 The \l{sub-page-sub}{::sub-page} subcontrol can be used to style the
1107 region of the slider that subtracts a page. The \l{add-page-sub}{::add-page}
1108 subcontrol can be used to style the region of the slider that adds a page.
1111 See \l{Qt Style Sheets Examples#Customizing QScrollBar}{Customizing QScrollBar}
1115 \li QSizeGrip \target qsizegrip-widget
1116 \li Supports the \l{#width-prop}{width},
1117 \l{#height-prop}{height}, and \l{#image-prop}{image}
1121 See \l{Qt Style Sheets Examples#Customizing QSizeGrip}{Customizing QSizeGrip}
1125 \li QSlider \target qslider-widget
1126 \li Supports the \l{box model}.
1129 For horizontal slides, the
1130 \l{min-width-prop}{min-width} and \l{height-prop}{height}
1131 properties must be provided. For vertical sliders, the
1132 \l{min-height-prop}{min-height} and \l{width-prop}{width}
1133 properties must be provided.
1136 The groove of the slider is styled
1137 using the \l{#groove-sub}{::groove}. The groove is
1138 positioned by default in the Contents rectangle of the widget.
1139 The thumb of the slider is styled using \l{#handle-sub}{::handle}
1140 subcontrol. The subcontrol moves in the Contents rectangle of
1141 the groove subcontrol.
1144 See \l{Qt Style Sheets Examples#Customizing QSlider}{Customizing QSlider}
1148 \li QSpinBox \target qspinbox-widget
1149 \li The frame of the spin box can be styled using the \l{box
1153 The up button and arrow can be styled using the
1154 \l{#up-button-sub}{::up-button} and
1155 \l{#up-arrow-sub}{::up-arrow} subcontrols. By default,
1156 the up-button is placed in the top right corner in the
1157 Padding rectangle of the widget. Without an explicit size,
1158 it occupies half the height of its reference rectangle.
1159 The up-arrow is placed in the center of the Contents
1160 rectangle of the up-button.
1163 The down button and arrow can be styled using the
1164 \l{#down-button-sub}{::down-button} and
1165 \l{#down-arrow-sub}{::down-arrow} subcontrols. By default,
1166 the down-button is placed in the bottom right corner in the
1167 Padding rectangle of the widget. Without an explicit size,
1168 it occupies half the height of its reference rectangle.
1169 The bottom-arrow is placed in the center of the Contents
1170 rectangle of the bottom-button.
1173 See \l{Qt Style Sheets Examples#Customizing QSpinBox}{Customizing QSpinBox}
1177 \li QSplitter \target qsplitter-widget
1178 \li Supports the \l{box model}. The handle of the splitter
1179 is styled using the \l{#handle-sub}{::handle} subcontrol.
1182 See \l{Qt Style Sheets Examples#Customizing QSplitter}{Customizing QSplitter}
1186 \li QStatusBar \target qstatusbar-widget
1187 \li Supports only the \l{Qt Style Sheets Reference#background-prop}
1188 {background} property.
1189 The frame for individual items can be style using the
1190 \l{#item-sub}{::item} subcontrol.
1193 See \l{Qt Style Sheets Examples#Customizing QStatusBar}{Customizing QStatusBar}
1197 \li QTabBar \target qtabbar-widget
1198 \li Individual tabs may be styled using the \l{#tab-sub}{::tab} subcontrol.
1199 Close buttons using the \l{#close-button-sub}{::close-button}.
1200 The tabs support the
1201 \l{#only-one-ps}{:only-one}, \l{#first-ps}{:first},
1202 \l{#last-ps}{:last}, \l{#middle-ps}{:middle},
1203 \l{#previous-selected-ps}{:previous--selected},
1204 \l{#next-selected-ps}{:next-selected},
1205 \l{#selected-ps}{:selected} pseudo states.
1208 The \l{#top-ps}{:top}, \l{#left-ps}{:left}, \l{#right-ps}{:right},
1209 \l{#bottom-ps}{:bottom} pseudo states depending on the orientation
1213 Overlapping tabs for the selected state are created by using
1214 negative margins or using the \c{absolute} position scheme.
1217 The tear indicator of the QTabBar is styled using the
1218 \l{#tear-sub}{::tear} subcontrol.
1221 QTabBar used two QToolButtons for its scrollers that can be styled
1222 using the \c{QTabBar QToolButton} selector. To specify the width
1223 of the scroll button use the \l{#scroller-sub}{::scroller}
1227 The alignment of the tabs within the QTabBar is styled
1228 using the \l{#Alignment}{alignment} property.
1231 To change the position of the QTabBar within a QTabWidget, use the
1232 \l{#tab-bar-sub}{tab-bar} subcontrol (and set subcontrol-position).
1234 See \l{Qt Style Sheets Examples#Customizing QTabWidget and QTabBar}{Customizing QTabBar}
1238 \li QTabWidget \target qtabwidget-widget
1239 \li The frame of the tab widget is styled using the
1240 \l{#pane-sub}{::pane} subcontrol. The left and right
1241 corners are styled using the \l{#left-corner-sub}{::left-corner}
1242 and \l{#right-corner-sub}{::right-corner} respectively.
1243 The position of the tab bar is controlled using the
1244 \l{#tab-bar-sub}{::tab-bar} subcontrol.
1247 By default, the subcontrols have positions of a QTabWidget in
1248 the QWindowsStyle. To place the QTabBar in the center, set the
1249 subcontrol-position of the tab-bar subcontrol.
1252 The \l{#top-ps}{:top}, \l{#left-ps}{:left}, \l{#right-ps}{:right},
1253 \l{#bottom-ps}{:bottom} pseudo states depending on the orientation
1257 See \l{Qt Style Sheets Examples#Customizing QTabWidget and QTabBar}
1258 {Customizing QTabWidget} for an example.
1261 \li QTableView \target qtableview-widget
1262 \li Supports the \l{box model}. When
1263 \l{QAbstractItemView::alternatingRowColors}{alternating row colors}
1264 is enabled, the alternating colors can be styled using the
1265 \l{#alternate-background-color-prop}{alternate-background-color}
1269 The color and background of the selected item is styled using
1270 \l{#selection-color-prop}{selection-color} and
1271 \l{#selection-background-color-prop}{selection-background-color}
1275 The corner widget in a QTableView is implemented as a QAbstractButton
1276 and can be styled using the "QTableView QTableCornerButton::section"
1279 \warning If you only set a background-color on a QTableCornerButton,
1280 the background may not appear unless you set the border property to
1281 some value. This is because, by default, the QTableCornerButton draws a
1282 native border which completely overlaps the background-color.
1285 The color of the grid can be specified using the
1286 \l{#gridline-color-prop}{gridline-color} property.
1289 See \l{qabstractscrollarea-widget}{QAbsractScrollArea} to
1290 style scrollable backgrounds.
1293 See \l{Qt Style Sheets Examples#Customizing QTableView}
1294 {Customzing QTableView} for an example.
1297 \li QTableWidget \target qtablewidget-widget
1298 \li See \l{#qtableview-widget}{QTableView}.
1301 \li QTextEdit \target qtextedit-widget
1302 \li Supports the \l{box model}.
1305 The color and background of selected text is styled using
1306 \l{#selection-color-prop}{selection-color} and
1307 \l{#selection-background-color-prop}{selection-background-color}
1311 The color of the placeholder text can be set using the
1312 \l{#placeholder-text-color-prop}{placeholder-text-color} property.
1315 See \l{qabstractscrollarea-widget}{QAbsractScrollArea} to
1316 style scrollable backgrounds.
1319 \li QTimeEdit \target qtimeedit-widget
1320 \li See \l{#qspinbox-widget}{QSpinBox}.
1323 \li QToolBar \target qtoolbar-widget
1324 \li Supports the \l{box model}.
1327 The \l{#top-ps}{:top}, \l{#left-ps}{:left}, \l{#right-ps}{:right},
1328 \l{#bottom-ps}{:bottom} pseudo states depending on the area in
1329 which the tool bar is grouped.
1332 The \l{#first-ps}{:first}, \l{#last-ps}{:last}, \l{#middle-ps}{:middle},
1333 \l{#only-one-ps}{:only-one} pseudo states indicator the position
1334 of the tool bar within a line group (See
1335 QStyleOptionToolBar::positionWithinLine).
1338 The separator of a QToolBar is styled using the
1339 \l{#separator-sub}{::separator} subcontrol.
1342 The handle (to move the toolbar) is styled using the
1343 \l{#handle-sub}{::handle} subcontrol.
1346 See \l{Qt Style Sheets Examples#Customizing QToolBar}{Customizing QToolBar}
1350 \li QToolButton \target qtoolbutton-widget
1351 \li Supports the \l{box model}.
1354 If the QToolButton has a menu, is
1355 \l{#menu-indicator-sub}{::menu-indicator} subcontrol can be used to
1356 style the indicator. By default, the menu-indicator is positioned
1357 at the bottom right of the Padding rectangle of the widget.
1360 If the QToolButton is in QToolButton::MenuButtonPopup mode,
1361 the \l{#menu-button-sub}{::menu-button} subcontrol is used to draw the
1362 menu button. \l{#menu-arrow-sub}{::menu-arrow} subcontrol is used to
1363 draw the menu arrow inside the menu-button. By default, it is
1364 positioned in the center of the Contents rectangle of the
1365 menu-button subcontrol.
1368 When the QToolButton displays arrows, the \l{#up-arrow-sub}{::up-arrow},
1369 \l{#down-arrow-sub}{::down-arrow}, \l{#left-arrow-sub}{::left-arrow}
1370 and \l{#right-arrow-sub}{::right-arrow} subcontrols are used.
1372 \warning If you only set a background-color on a QToolButton, the background
1373 will not appear unless you set the border property to some value. This is
1374 because, by default, the QToolButton draws a native border which completely
1375 overlaps the background-color. For example,
1377 \snippet code/doc_src_stylesheet.qdoc 31
1379 See \l{Qt Style Sheets Examples#Customizing QToolButton}{Customizing QToolButton}
1383 \li QToolBox \target qtoolbox-widget
1384 \li Supports the \l{box model}.
1387 The individual tabs can by styled using the
1388 \l{#tab-sub}{::tab} subcontrol. The tabs support the
1389 \l{#only-one-ps}{:only-one}, \l{#first-ps}{:first},
1390 \l{#last-ps}{:last}, \l{#middle-ps}{:middle},
1391 \l{#previous-selected-ps}{:previous-selected},
1392 \l{#next-selected-ps}{:next-selected},
1393 \l{#selected-ps}{:selected} pseudo states.
1396 \li QToolTip \target qtooltip-widget
1397 \li Supports the \l{box model}. The \l{#opacity-prop}{opacity}
1398 property controls the opacity of the tooltip.
1401 See \l{Qt Style Sheets Examples#Customizing QFrame}{Customizing QFrame}
1402 for an example (a QToolTip is a QFrame).
1405 \li QTreeView \target qtreeview-widget
1406 \li Supports the \l{box model}. When
1407 \l{QAbstractItemView::alternatingRowColors}{alternating row colors}
1408 is enabled, the alternating colors can be styled using the
1409 \l{#alternate-background-color-prop}{alternate-background-color}
1413 The color and background of the selected item is styled using
1414 \l{#selection-color-prop}{selection-color} and
1415 \l{#selection-background-color-prop}{selection-background-color}
1419 The selection behavior is controlled by the
1420 \l{#show-decoration-selected-prop}{show-decoration-selected} property.
1423 The branches of the tree view can be styled using the
1424 \l{#branch-sub}{::branch} subcontrol. The
1425 ::branch Sub-control supports the \l{open-ps}{:open},
1426 \l{closed-ps}{:closed}, \l{has-siblings-ps}{:has-sibling} and
1427 \l{has-children-ps}{:has-children} pseudo states.
1430 Use the \l{#item-sub}{::item} subcontrol for more fine grained
1431 control over the items in the QTreeView.
1434 See \l{qabstractscrollarea-widget}{QAbsractScrollArea} to
1435 style scrollable backgrounds.
1438 See \l{Qt Style Sheets Examples#Customizing QTreeView}{Customizing QTreeView}
1439 for an example to style the branches.
1442 \li QTreeWidget \target qtreewidget-widget
1443 \li See \l{#qtreeview-widget}{QTreeView}.
1446 \li QWidget \target qwidget-widget
1447 \li Supports only the \l{Qt Style Sheets Reference#background-prop}{background},
1448 \l{#background-clip-prop}{background-clip} and
1449 \l{#background-origin-prop}{background-origin} properties.
1452 If you subclass from QWidget, you need to provide a paintEvent for your
1453 custom QWidget as below:
1454 \snippet code/doc_src_stylesheet.cpp 32
1456 The above code is a no-operation if there is no stylesheet set.
1458 \warning Make sure you define the Q_OBJECT macro for your custom
1463 \section1 List of Properties
1465 This section lists all the properties supported by Qt Style
1466 Sheets. Which values can be given to a property depend on the
1467 \l{List of Property Types}{property's type}. Unless otherwise
1468 specified, the following properties apply to all widgets. Properties
1469 marked with an asterisk * are specific to Qt and have no equivalent
1470 in CSS2 or CSS3. The Qt-specific properties are the following:
1472 \li \l{#gridline-color*}{gridline-color*}
1473 \li \l{#image*}{image*}
1474 \li \l{#lineedit-password-character*}{lineedit-password-character*}
1475 \li \l{#lineedit-password-mask-delay*}{lineedit-password-mask-delay*}
1476 \li \l{#messagebox-text-interaction-flags*}{messagebox-text-interaction-flags*}
1477 \li \l{#opacity*}{opacity*}
1478 \li \l{#placeholder-text-color*}{placeholder-text-color*}
1479 \li \l{#selection-background-color*}{selection-background-color*}
1480 \li \l{#selection-color*}{selection-color*}
1481 \li \l{#show-decoration-selected*}{show-decoration-selected*}
1482 \li \l{#spacing*}{spacing*}
1483 \li \l{#subcontrol-origin*}{subcontrol-origin*}
1484 \li \l{#subcontrol-position*}{subcontrol-position*}
1485 \li \l{#widget-animation-duration*}{widget-animation-duration*}
1488 \section2 accent-color
1491 \row \li \b Type \li \l{#Brush}{Brush}
1494 The property sets the \c Accent, which is used to emphasize
1495 interactive UI elements. If this property is not set, it defaults to the \c highlight color.
1497 \section2 alternate-background-color
1498 \target alternate-background-color-prop
1500 \row \li \b Type \li \l{#Brush}{Brush}
1502 The \l{QAbstractItemView::alternatingRowColors}
1503 {alternate background color} used in QAbstractItemView subclasses.
1505 If this property is not set, the default value is
1506 whatever is set for the palette's
1507 \l{QPalette::}{AlternateBase} role.
1511 \snippet code/doc_src_stylesheet.qdoc 33
1513 See also \l{Qt Style Sheets Reference#background-prop}{background} and
1514 \l{#selection-background-color-prop}{selection-background-color}.
1516 \section2 background
1517 \target background-prop
1519 \row \li \b Type \li \l{#Background}{Background}
1521 Shorthand notation for setting the background. Equivalent
1522 to specifying \c background-color, \c background-image, \c
1523 background-repeat, and/or \c background-position.
1525 This property is supported by QAbstractItemView
1526 subclasses, QAbstractSpinBox subclasses, QCheckBox,
1527 QComboBox, QDialog, QFrame, QGroupBox, QLabel, QLineEdit,
1528 QMenu, QMenuBar, QPushButton, QRadioButton, QSplitter,
1529 QTextEdit, QToolTip, and plain \l{QWidget}s.
1533 \snippet code/doc_src_stylesheet.qdoc 34
1536 Often, it is required to set a fill pattern similar to the styles
1537 in Qt::BrushStyle. You can use the background-color property for
1538 Qt::SolidPattern, Qt::RadialGradientPattern, Qt::LinearGradientPattern
1539 and Qt::ConicalGradientPattern. The other patterns are easily achieved
1540 by creating a background image that contains the pattern.
1544 \snippet code/doc_src_stylesheet.qdoc 35
1546 See also \l{#background-origin-prop}{background-origin},
1547 \l{#selection-background-color-prop}{selection-background-color},
1548 \l{#background-clip-prop}{background-clip},
1549 \l{#background-attachment-prop}{background-attachment}
1550 and \l{#alternate-background-color-prop}{alternate-background-color}.
1552 \section2 background-color
1553 \target background-color-prop
1555 \row \li \b Type \li \l{#Brush}{Brush}
1557 The background color used for the widget.
1561 \snippet code/doc_src_stylesheet.qdoc 36
1563 \section2 background-image
1564 \target background-image-prop
1566 \row \li \b Type \li \l{#Url}{Url}
1568 The background image used for the widget. Semi-transparent
1569 parts of the image let the \c background-color shine
1574 \snippet code/doc_src_stylesheet.qdoc 37
1577 \section2 background-repeat
1578 \target background-repeat-prop
1580 \row \li \b Type \li \l{#Repeat}{Repeat}
1582 Whether and how the background image is repeated to fill
1583 the \c background-origin rectangle.
1585 If this property is not specified, the background image
1586 is repeated in both directions (\c repeat).
1590 \snippet code/doc_src_stylesheet.qdoc 38
1592 \section2 background-position
1594 \row \li \b Type \li \l{#Alignment}{Alignment}
1596 The alignment of the background image within the \c
1597 background-origin rectangle.
1599 If this property is not specified, the alignment is \c
1604 \snippet code/doc_src_stylesheet.qdoc 39
1606 \section2 background-attachment
1607 \target background-attachment-prop
1609 \row \li \b Type \li \l{#Attachment}{Attachment}
1611 Determines whether the background-image in a QAbstractScrollArea
1612 is scrolled or fixed with respect to the viewport.
1613 By default, the background-image scrolls with the viewport.
1617 \snippet code/doc_src_stylesheet.qdoc 40
1619 See also \l{Qt Style Sheets Reference#background-prop}{background}
1621 \section2 background-clip
1622 \target background-clip-prop
1624 \row \li \b Type \li \l{#Origin}{Origin}
1626 The widget's rectangle, in which the \c background is drawn.
1628 This property specifies the rectangle to which the \c background-color
1629 and \c background-image are clipped.
1631 This property is supported by QAbstractItemView
1632 subclasses, QAbstractSpinBox subclasses, QCheckBox,
1633 QComboBox, QDialog, QFrame, QGroupBox, QLabel,
1634 QPushButton, QRadioButton, QSplitter, QTextEdit, QToolTip,
1635 and plain \l{QWidget}s.
1637 If this property is not specified, the default is \c
1642 \snippet code/doc_src_stylesheet.qdoc 41
1644 See also \l{Qt Style Sheets Reference#background-prop}{background},
1645 \l{#background-origin-prop}{background-origin} and \l{The Box Model}.
1647 \section2 background-origin
1648 \target background-origin-prop
1650 \row \li \b Type \li \l{#Origin}{Origin}
1653 The widget's background rectangle, to use in conjunction
1654 with \c background-position and \c background-image.
1656 This property is supported by QAbstractItemView
1657 subclasses, QAbstractSpinBox subclasses, QCheckBox,
1658 QComboBox, QDialog, QFrame, QGroupBox, QLabel,
1659 QPushButton, QRadioButton, QSplitter, QTextEdit, QToolTip,
1660 and plain \l{QWidget}s.
1662 If this property is not specified, the default is \c
1667 \snippet code/doc_src_stylesheet.qdoc 42
1669 See also \l{Qt Style Sheets Reference#background-prop}{background} and
1675 \row \li \b Type \li \l{#Border}{Border}
1678 Shorthand notation for setting the widget's border. Equivalent
1679 to specifying \c border-color, \c border-style, and/or
1682 This property is supported by QAbstractItemView
1683 subclasses, QAbstractSpinBox subclasses, QCheckBox,
1684 QComboBox, QFrame, QGroupBox, QLabel, QLineEdit,
1685 QMenu, QMenuBar, QPushButton, QRadioButton, QSplitter,
1686 QTextEdit, QToolTip, and plain \l{QWidget}s.
1690 \snippet code/doc_src_stylesheet.qdoc 43
1692 \section2 border-top
1695 \row \li \b Type \li \l{#Border}{Border}
1698 Shorthand notation for setting the widget's top border.
1699 Equivalent to specifying \c border-top-color, \c
1700 border-top-style, and/or \c border-top-width.
1702 \section2 border-right
1704 \row \li \b Type \li \l{#Border}{Border}
1707 Shorthand notation for setting the widget's right border.
1708 Equivalent to specifying \c border-right-color, \c
1709 border-right-style, and/or \c border-right-width.
1711 \section2 border-bottom
1713 \row \li \b Type \li \l{#Border}{Border}
1716 Shorthand notation for setting the widget's bottom border.
1717 Equivalent to specifying \c border-bottom-color, \c
1718 border-bottom-style, and/or \c border-bottom-width.
1720 \section2 border-left
1722 \row \li \b Type \li \l{#Border}{Border}
1725 Shorthand notation for setting the widget's left border.
1726 Equivalent to specifying \c border-left-color, \c
1727 border-left-style, and/or \c border-left-width.
1730 \section2 border-color
1731 \target border-attrs
1732 \target border-color-prop
1734 \row \li \b Type \li \l{#Box Colors}{Box Colors}
1737 The color of all the border's edges. Equivalent to
1738 specifying \c border-top-color, \c border-right-color, \c
1739 border-bottom-color, and \c border-left-color.
1741 This property is supported by QAbstractItemView
1742 subclasses, QAbstractSpinBox subclasses, QCheckBox,
1743 QComboBox, QFrame, QGroupBox, QLabel, QLineEdit,
1744 QMenu, QMenuBar, QPushButton, QRadioButton, QSplitter,
1745 QTextEdit, QToolTip, and plain \l{QWidget}s.
1747 If this property is not specified, it defaults to
1748 \l{#color-prop}{color} (i.e., the widget's foreground
1753 \snippet code/doc_src_stylesheet.qdoc 44
1755 See also \l{Qt Style Sheets Reference#border-style-prop}{border-style},
1756 \l{Qt Style Sheets Reference#border-width-prop}{border-width},
1757 \l{#border-image-prop}{border-image}, and \l{The Box Model}.
1759 \section2 border-top-color
1761 \row \li \b Type \li \l{#Brush}{Brush}
1764 The color of the border's top edge.
1766 \section2 border-right-color
1768 \row \li \b Type \li \l{#Brush}{Brush}
1771 The color of the border's right edge.
1773 \section2 border-bottom-color
1775 \row \li \b Type \li \l{#Brush}{Brush}
1778 The color of the border's bottom edge.
1780 \section2 border-left-color
1782 \row \li \b Type \li \l{#Brush}{Brush}
1785 The color of the border's left edge.
1787 \section2 border-image
1788 \target border-image-prop
1790 \row \li \b Type \li \l{#Border Image}{Border Image}
1793 The image used to fill the border. The image is cut into
1794 nine parts and stretched appropriately if necessary. See
1795 \l{#Border Image}{Border Image} for details.
1797 This property is supported by QAbstractItemView
1798 subclasses, QAbstractSpinBox subclasses, QCheckBox,
1799 QComboBox, QFrame, QGroupBox, QLabel, QLineEdit,
1800 QMenu, QMenuBar, QPushButton, QRadioButton, QSplitter,
1801 QTextEdit and QToolTip.
1803 See also \l{#border-color-prop}{border-color},
1804 \l{Qt Style Sheets Reference#border-style-prop}{border-style},
1805 \l{Qt Style Sheets Reference#border-width-prop}{border-width}, and
1808 \section2 border-radius
1809 \target border-radius-prop
1811 \row \li \b Type \li \l{#Radius}{Radius}
1814 The radius of the border's corners. Equivalent to
1815 specifying \c border-top-left-radius, \c
1816 border-top-right-radius, \c border-bottom-right-radius,
1817 and \c border-bottom-left-radius.
1819 The border-radius clips the element's
1820 \l{Qt Style Sheets Reference#background-prop}{background}.
1822 This property is supported by QAbstractItemView
1823 subclasses, QAbstractSpinBox subclasses, QCheckBox,
1824 QComboBox, QFrame, QGroupBox, QLabel, QLineEdit, QMenu,
1825 QMenuBar, QPushButton, QRadioButton, QSplitter, QTextEdit,
1828 If this property is not specified, it defaults to 0.
1832 \snippet code/doc_src_stylesheet.qdoc 45
1834 See also \l{Qt Style Sheets Reference#border-width-prop}{border-width} and
1837 \section2 border-top-left-radius
1839 \row \li \b Type \li \l{#Radius}{Radius}
1842 The radius of the border's top-left corner.
1844 \section2 border-top-right-radius
1846 \row \li \b Type \li \l{#Radius}{Radius}
1849 The radius of the border's top-right corner.
1851 \section2 border-bottom-right-radius
1853 \row \li \b Type \li \l{#Radius}{Radius}
1856 The radius of the border's bottom-right corner. Setting
1857 this property to a positive value results in a rounded
1860 \section2 border-bottom-left-radius
1862 \row \li \b Type \li \l{#Radius}{Radius}
1865 The radius of the border's bottom-left corner. Setting this
1866 property to a positive value results in a rounded corner.
1868 \section2 border-style
1869 \target border-style-prop
1871 \row \li \b Type \li \l{#Border Style}{Border Style}
1874 The style of all the border's edges.
1876 This property is supported by QAbstractItemView
1877 subclasses, QAbstractSpinBox subclasses, QCheckBox,
1878 QComboBox, QFrame, QGroupBox, QLabel, QLineEdit, QMenu,
1879 QMenuBar, QPushButton, QRadioButton, QSplitter, QTextEdit,
1882 If this property is not specified, it defaults to \c none.
1886 \snippet code/doc_src_stylesheet.qdoc 46
1888 See also \l{#border-color-prop}{border-color},
1889 \l{Qt Style Sheets Reference#border-style-prop}{border-style},
1890 \l{#border-image-prop}{border-image}, and \l{The Box Model}.
1892 \section2 border-top-style
1894 \row \li \b Type \li \l{#Border Style}{Border Style}}
1897 The style of the border's top edge.
1899 \section2 border-right-style
1901 \row \li \b Type \li \l{#Border Style}{Border Style}
1904 The style of the border's right edge.
1906 \section2 border-bottom-style
1908 \row \li \b Type \li \l{#Border Style}{Border Style}
1911 The style of the border's bottom edge.
1913 \section2 border-left-style
1915 \row \li \b Type \li \l{#Border Style}{Border Style}
1918 The style of the border's left edge.
1920 \section2 border-width
1921 \target border-width-prop
1923 \row \li \b Type \li \l{#Box Lengths}{Box Lengths}
1926 The width of the border. Equivalent to setting \c
1927 border-top-width, \c border-right-width, \c
1928 border-bottom-width, and \c border-left-width.
1930 This property is supported by QAbstractItemView
1931 subclasses, QAbstractSpinBox subclasses, QCheckBox,
1932 QComboBox, QFrame, QGroupBox, QLabel, QLineEdit, QMenu,
1933 QMenuBar, QPushButton, QRadioButton, QSplitter, QTextEdit,
1938 \snippet code/doc_src_stylesheet.qdoc 47
1940 See also \l{#border-color-prop}{border-color},
1941 \l{#border-radius-prop}{border-radius},
1942 \l{Qt Style Sheets Reference#border-style-prop}{border-style},
1943 \l{#border-image-prop}{border-image}, and
1946 \section2 border-top-width
1948 \row \li \b Type \li \l{#Length}{Length}
1951 The width of the border's top edge.
1953 \section2 border-right-width
1955 \row \li \b Type \li \l{#Length}{Length}
1958 The width of the border's right edge.
1960 \section2 border-bottom-width
1962 \row \li \b Type \li \l{#Length}{Length}
1965 The width of the border's bottom edge.
1967 \section2 border-left-width
1969 \row \li \b Type \li \l{#Length}{Length}
1972 The width of the border's left edge.
1977 \row \li \b Type \li \l{#Length}{Length}
1980 If \l{#position-prop}{position} is \c relative (the
1981 default), moves a subcontrol by a certain offset up;
1982 specifying \tt{bottom: \e{y}} is then equivalent to
1983 specifying \tt{\l{Qt Style Sheets Reference#top-prop}{top}: -\e{y}}.
1985 If \l{#position-prop}{position} is \c absolute, the \c
1986 bottom property specifies the subcontrol's bottom edge
1987 in relation to the parent's bottom edge (see also
1988 \l{Qt Style Sheets Reference#subcontrol-origin-prop}
1989 {subcontrol-origin}).
1993 \snippet code/doc_src_stylesheet.qdoc 48
1995 See also \l{Qt Style Sheets Reference#left-prop}{left}, \l{#right-prop}{right}, and
1996 \l{Qt Style Sheets Reference#top-prop}{top}.
1999 \section2 button-layout
2000 \target button-layout-prop
2002 \row \li \b Type \li \l{#Number}{Number}
2005 The layout of buttons in a QDialogButtonBox or
2006 a QMessageBox. The possible values are 0
2007 (\l{QDialogButtonBox::}{WinLayout}), 1
2008 (\l{QDialogButtonBox::}{MacLayout}), 2
2009 (\l{QDialogButtonBox::}{KdeLayout}), 3
2010 (\l{QDialogButtonBox::}{GnomeLayout}) and 5
2011 (\l{QDialogButtonBox::}{AndroidLayout}).
2013 If this property is not specified, it defaults to the
2014 value specified by the current style for the
2015 \l{QStyle::}{SH_DialogButtonLayout} style hint.
2019 \snippet code/doc_src_stylesheet.qdoc 49
2025 \row \li \b Type \li \l{#Brush}{Brush} \br
2028 The color used to render text.
2030 This property is supported by all widgets that respect
2031 the \l QWidget::palette.
2033 If this property is not set, the default is whatever is
2034 set for in the widget's palette for the
2035 QWidget::foregroundRole (typically black).
2039 \snippet code/doc_src_stylesheet.qdoc 50
2041 See also \l{Qt Style Sheets Reference#background-prop}{background} and
2042 \l{#selection-color-prop}{selection-color}.
2044 \section2 dialogbuttonbox-buttons-have-icons
2046 \row \li \b Type \li \l{#Boolean}{Boolean}
2049 Whether the buttons in a QDialogButtonBox show icons
2051 If this property is set to 1, the buttons of a QDialogButtonBox
2052 show icons; if it is set to 0, the icons are not shown.
2054 See the \l{Qt Style Sheets Reference#list of icons}{List of Icons}
2055 section for information on how to set icons.
2057 \snippet code/doc_src_stylesheet.qdoc 51
2059 \note Styles defining this property must be applied before the
2060 QDialogButtonBox is created; this means that you must apply the
2061 style to the parent widget or to the application itself.
2065 \li \b{\c etch-disabled-text}*
2066 \li \l{#Boolean}{Boolean}
2067 \li Whether disabled text is drawn etched.
2069 If this property is not specified, it defaults to the
2070 value specified by the current style for the
2071 \l{QStyle::}{SH_EtchDisabledText} style hint.
2075 \snippet code/doc_src_stylesheet.qdoc 52
2081 \row \li \b Type \li \l{#Font}{Font}
2084 Shorthand notation for setting the text's font. Equivalent
2085 to specifying \c font-family, \c font-size, \c font-style,
2086 and/or \c font-weight.
2088 This property is supported by all widgets that respect
2089 the \l QWidget::font.
2091 If this property is not set, the default is the
2096 \snippet code/doc_src_stylesheet.qdoc 53
2098 \section2 font-family
2100 \row \li \b Type \li String
2107 \snippet code/doc_src_stylesheet.qdoc 54
2111 \row \li \b Type \li \l{#Font Size}{Font Size}
2114 The font size. In this version of Qt, only pt and px metrics are
2119 \snippet code/doc_src_stylesheet.qdoc 55
2121 \section2 font-style
2123 \row \li \b Type \li \l {#Font Style} {Font Style}
2130 \snippet code/doc_src_stylesheet.qdoc 56
2132 \section2 font-weight
2134 \row \li \b Type \li \l{#Font Weight}{Font Weight}
2137 The weight of the font.
2139 \section2 gridline-color*
2140 \target gridline-color-prop
2142 \row \li \b Type \li \l{#Color}{Color}
2145 The color of the grid line in a QTableView.
2147 If this property is not specified, it defaults to the
2148 value specified by the current style for the
2149 \l{QStyle::}{SH_Table_GridLineColor} style hint.
2153 \snippet code/doc_src_stylesheet.qdoc 57
2159 \row \li \b Type \li \l{#Length}{Length}
2162 The height of a subcontrol (or in some case, a widget).
2164 If this property is not specified, it defaults to a value
2165 that depends on the subcontrol/widget and on the current style.
2167 \warning Unless otherwise specified, this property has no effect
2168 when set on widgets. If you want a widget with a fixed height, set
2169 the \l{#min-width-prop}{min-height} and
2170 \l{#max-width-prop}{max-height} to the same value.
2174 \snippet code/doc_src_stylesheet.qdoc 58
2176 See also \l{#width-prop}{width}.
2181 \row \li \b Type \li \l{#Url}{Url}+
2184 The icon that is used, for widgets that have an icon.
2186 The only widget currently supporting this property is QPushButton.
2188 \note It's the application's responsibility to assign an icon to a
2189 button (using the QAbstractButton API), and not the style's. So be
2190 careful setting it unless your stylesheet is targeting a specific
2193 Available since 5.15.
2196 \target icon-size-prop
2198 \row \li \b Type \li \l{#Length}{Length}
2201 The width and height of the icon in a widget.
2203 The icon size of the following widgets can be set using this
2219 \row \li \b Type \li \l{#Url}{Url}+
2222 The image that is drawn in the contents rectangle of a
2225 The image property accepts a list of \l{#Url}{Url}s or
2226 an \c{svg}. The actual image that is drawn is determined
2227 using the same algorithm as QIcon (i.e) the image is never scaled
2228 up but always scaled down if necessary. If a \c{svg} is specified,
2229 the image is scaled to the size of the contents rectangle.
2231 Setting the image property on sub controls implicitly sets the
2232 width and height of the sub-control (unless the image in a SVG).
2234 In Qt 4.3 and later, the alignment of the
2235 image within the rectangle can be specified using
2236 \l{image-position-prop}{image-position}.
2238 This property is for subcontrols only--we don't support it for
2241 \warning The QIcon SVG plugin is needed to render SVG images.
2245 \snippet code/doc_src_stylesheet.qdoc 59
2248 \section2 image-position
2249 \target image-position-prop
2251 \row \li \b Type \li \l{#Alignment}{alignment}
2254 In Qt 4.3 and later, the alignment of the image image's position can be specified
2255 using relative or absolute position.
2260 \row \li \b Type \li \l{#Length}{Length}
2263 If \l{#position-prop}{position} is \c relative (the
2264 default), moves a subcontrol by a certain offset to
2267 If \l{#position-prop}{position} is \c absolute, the \c
2268 left property specifies the subcontrol's left edge in
2269 relation to the parent's left edge (see also
2270 \l{Qt Style Sheets Reference#subcontrol-origin-prop}{subcontrol-origin}).
2272 If this property is not specified, it defaults to \c 0.
2276 \snippet code/doc_src_stylesheet.qdoc 60
2278 See also \l{#right-prop}{right}, \l{Qt Style Sheets Reference#top-prop}{top}, and
2279 \l{#bottom-prop}{bottom}.
2281 \section2 lineedit-password-character*
2282 \target lineedit-password-character-prop
2284 \row \li \b Type \li \l{#Number}{Number}
2287 The QLineEdit password character as a Unicode number.
2289 If this property is not specified, it defaults to the
2290 value specified by the current style for the
2291 \l{QStyle::}{SH_LineEdit_PasswordCharacter} style hint.
2295 \snippet code/doc_src_stylesheet.qdoc 61
2298 \section2 lineedit-password-mask-delay*
2299 \target lineedit-password-mask-delay-prop
2301 \row \li \b Type \li \l{#Number}{Number}
2304 The QLineEdit password mask delay in milliseconds before
2305 \l{#lineedit-password-character-prop}{lineedit-password-character} is applied to visible character.
2307 If this property is not specified, it defaults to the
2308 value specified by the current style for the
2309 \l{QStyle::}{SH_LineEdit_PasswordMaskDelay} style hint.
2311 Available since Qt 5.4.
2315 \snippet code/doc_src_stylesheet.qdoc 160
2320 \row \li \b Type \li \l {#Box Lengths}{Box Lengths}
2323 The widget's margins. Equivalent to specifying \c
2324 margin-top, \c margin-right, \c margin-bottom, and \c
2327 This property is supported by QAbstractItemView
2328 subclasses, QAbstractSpinBox subclasses, QCheckBox,
2329 QComboBox, QFrame, QGroupBox, QLabel, QLineEdit, QMenu,
2330 QMenuBar, QPushButton, QRadioButton, QSplitter, QTextEdit,
2333 If this property is not specified, it defaults to \c 0.
2337 \snippet code/doc_src_stylesheet.qdoc 62
2339 See also \l{Qt Style Sheets Reference#padding-prop}{padding},
2340 \l{#spacing-prop}{spacing}, and \l{The Box Model}.
2342 \section2 margin-top
2344 \row \li \b Type \li \l{#Length}{Length}
2346 The widget's top margin.
2348 \section2 margin-right
2350 \row \li \b Type \li \l{#Length}{Length}
2352 The widget's right margin.
2354 \section2 margin-bottom
2356 \row \li \b Type \li \l{#Length}{Length}
2358 The widget's bottom margin.
2360 \section2 margin-left
2362 \row \li \b Type \li \l{#Length}{Length}
2364 The widget's left margin.
2366 \section2 max-height
2367 \target max-height-prop
2369 \row \li \b Type \li \l{#Length}{Length}
2372 The widget's or a subcontrol's maximum height.
2374 This property is supported by QAbstractItemView
2375 subclasses, QAbstractSpinBox subclasses, QCheckBox,
2376 QComboBox, QFrame, QGroupBox, QLabel, QLineEdit, QMenu,
2377 QMenuBar, QPushButton, QRadioButton, QSizeGrip, QSpinBox,
2378 QSplitter, QStatusBar, QTextEdit, and QToolTip.
2380 The value is relative to the contents rect in the \l{The
2381 Box Model}{box model}.
2385 \snippet code/doc_src_stylesheet.qdoc 63
2387 See also \l{#max-width-prop}{max-width}.
2390 \target max-width-prop
2392 \row \li \b Type \li \l{#Length}{Length}
2395 The widget's or a subcontrol's maximum width.
2397 This property is supported by QAbstractItemView
2398 subclasses, QAbstractSpinBox subclasses, QCheckBox,
2399 QComboBox, QFrame, QGroupBox, QLabel, QLineEdit, QMenu,
2400 QMenuBar, QPushButton, QRadioButton, QSizeGrip, QSpinBox,
2401 QSplitter, QStatusBar, QTextEdit, and QToolTip.
2403 The value is relative to the contents rect in the \l{The
2404 Box Model}{box model}.
2408 \snippet code/doc_src_stylesheet.qdoc 64
2410 See also \l{#max-height-prop}{max-height}.
2412 \section2 messagebox-text-interaction-flags*
2413 \target messagebox-text-interaction-flags-prop
2415 \row \li \b Type \li \l{#Number}{Number}
2418 The interaction behavior for text in a message box.
2419 Possible values are based on Qt::TextInteractionFlags.
2421 If this property is not specified, it defaults to the
2422 value specified by the current style for the
2423 \l{QStyle::}{SH_MessageBox_TextInteractionFlags} style
2428 \snippet code/doc_src_stylesheet.qdoc 65
2430 \section2 min-height
2431 \target min-height-prop
2433 \row \li \b Type \li \l{#Length}{Length}
2436 The widget's or a subcontrol's minimum height.
2438 This property is supported by QAbstractItemView
2439 subclasses, QAbstractSpinBox subclasses, QCheckBox,
2440 QComboBox, QFrame, QGroupBox, QLabel, QLineEdit, QMenu,
2441 QMenuBar, QPushButton, QRadioButton, QSizeGrip, QSpinBox,
2442 QSplitter, QStatusBar, QTextEdit, QToolButton, and QToolTip.
2444 If this property is not specified, the minimum height is
2445 derived based on the widget's contents and the style.
2447 The value is relative to the contents rect in the \l{The
2448 Box Model}{box model}.
2452 \snippet code/doc_src_stylesheet.qdoc 66
2454 \note Setting this property might allow widgets to shrink
2455 smaller than the space required for the contents.
2457 See also \l{#min-width-prop}{min-width}.
2460 \target min-width-prop
2462 \row \li \b Type \li \l{#Length}{Length}
2465 The widget's or a subcontrol's minimum width.
2467 This property is supported by QAbstractItemView
2468 subclasses, QAbstractSpinBox subclasses, QCheckBox,
2469 QComboBox, QFrame, QGroupBox, QLabel, QLineEdit, QMenu,
2470 QMenuBar, QPushButton, QRadioButton, QSizeGrip, QSpinBox,
2471 QSplitter, QStatusBar, QTextEdit, QToolButton, and QToolTip.
2473 If this property is not specified, the minimum width is
2474 derived based on the widget's contents and the style.
2476 The value is relative to the contents rect in the \l{The
2477 Box Model}{box model}.
2481 \snippet code/doc_src_stylesheet.qdoc 67
2483 \note Setting this property might allow widgets to shrink
2484 smaller than the space required for the contents.
2486 See also \l{#min-height-prop}{min-height}.
2489 \target opacity-prop
2491 \row \li \b Type \li \l{#Number}{Number}
2494 The opacity for a widget. Possible values are from 0
2495 (transparent) to 255 (opaque). For the moment, this is
2496 only supported for \l{QToolTip}{tooltips}.
2498 If this property is not specified, it defaults to the
2499 value specified by the current style for the
2500 \l{QStyle::}{SH_ToolTipLabel_Opacity} style hint.
2504 \snippet code/doc_src_stylesheet.qdoc 68
2508 The outline drawn around the object's border.
2510 \section2 outline-color
2512 \row \li \b Type \li \l{#Color}{Color}
2515 The color of the outline.
2516 See also \l{Qt Style Sheets Reference#border-color-prop}{border-color}
2518 \section2 outline-offset
2520 \row \li \b Type \li \l{#Length}{Length}
2523 The outline's offset from the border of the widget.
2525 \section2 outline-style
2527 Specifies the pattern used to draw the outline.
2528 See also \l{Qt Style Sheets Reference#border-style-prop}{border-style}
2530 \section2 outline-radius
2532 Adds rounded corners to the outline.
2534 \section2 outline-bottom-left-radius
2536 \row \li \b Type \li \l{#Radius}{Radius}
2539 The radius for the bottom-left rounded corner of the outline.
2541 \section2 outline-bottom-right-radius
2543 \row \li \b Type \li \l{#Radius}{Radius}
2546 The radius for the bottom-right rounded corner of the outline.
2548 \section2 outline-top-left-radius
2550 \row \li \b Type \li \l{#Radius}{Radius}
2553 The radius for the top-left corner of the outline.
2555 \section2 outline-top-right-radius
2557 \row \li \b Type \li \l{#Radius}{Radius}
2560 The radius for the top-right rounded corner of the outline.
2563 \target padding-prop
2565 \row \li \b Type \li \l{#Box Lengths}{Box Lengths}
2568 The widget's padding. Equivalent to specifying \c
2569 padding-top, \c padding-right, \c padding-bottom, and \c
2572 This property is supported by QAbstractItemView
2573 subclasses, QAbstractSpinBox subclasses, QCheckBox,
2574 QComboBox, QFrame, QGroupBox, QLabel, QLineEdit, QMenu,
2575 QMenuBar, QPushButton, QRadioButton, QSplitter, QTextEdit,
2578 If this property is not specified, it defaults to \c 0.
2582 \snippet code/doc_src_stylesheet.qdoc 69
2584 See also \l{#margin-prop}{margin},
2585 \l{#spacing-prop}{spacing}, and \l{The Box Model}.
2587 \section2 padding-top
2589 \row \li \b Type \li \l{#Length}{Length}
2592 The widget's top padding.
2594 \section2 padding-right
2596 \row \li \b Type \li \l{#Length}{Length}
2599 The widget's right padding.
2601 \section2 padding-bottom
2603 \row \li \b Type \li \l{#Length}{Length}
2606 The widget's bottom padding.
2608 \section2 padding-left
2610 \row \li \b Type \li \l{#Length}{Length}
2613 The widget's left padding.
2615 \section2 paint-alternating-row-colors-for-empty-area
2616 \target paint-alternating-row-colors-for-empty-area-prop
2618 \row \li \b Type \li \c bool
2621 Whether the QTreeView paints alternating row colors for the empty
2622 area (i.e the area where there are no items)
2624 \section2 placeholder-text-color*
2625 \target placeholder-text-color-prop
2627 \row \li \b Type \li \l{#Brush}{Brush} \br
2630 The color used for the placeholder text of text editing widgets.
2632 If this property is not set, the default value is whatever
2633 is set for the palette's \l{QPalette::}{PlaceholderText}
2638 \snippet code/doc_src_stylesheet.qdoc 163
2640 Available since 6.5.
2643 \target position-prop
2645 \row \li \b Type \li \c relative \br
2649 Whether offsets specified using \l{Qt Style Sheets Reference#left-prop}{left},
2650 \l{#right-prop}{right}, \l{Qt Style Sheets Reference#top-prop}{top}, and
2651 \l{#bottom-prop}{bottom} are relative or absolute
2654 If this property is not specified, it defaults to \c
2660 \row \li \b Type \li \l{#Length}{Length}
2663 If \l{#position-prop}{position} is \c relative (the
2664 default), moves a subcontrol by a certain offset to
2665 the left; specifying \tt{right: \e{x}} is then equivalent
2666 to specifying \tt{\l{Qt Style Sheets Reference#left-prop}{left}: -\e{x}}.
2668 If \l{#position-prop}{position} is \c absolute, the \c
2669 right property specifies the subcontrol's right edge in
2670 relation to the parent's right edge (see also
2671 \l{Qt Style Sheets Reference#subcontrol-origin-prop}{subcontrol-origin}).
2675 \snippet code/doc_src_stylesheet.qdoc 70
2677 See also \l{Qt Style Sheets Reference#left-prop}{left}, \l{Qt Style Sheets Reference#top-prop}{top}, and
2678 \l{#bottom-prop}{bottom}.
2680 \section2 selection-background-color*
2681 \target selection-background-color-prop
2683 \row \li \b Type \li \l{#Brush}{Brush}
2686 The background of selected text or items.
2688 This property is supported by all widgets that respect
2689 the \l QWidget::palette and that show selection text.
2691 If this property is not set, the default value is
2692 whatever is set for the palette's
2693 \l{QPalette::}{Highlight} role.
2697 \snippet code/doc_src_stylesheet.qdoc 71
2699 See also \l{#selection-color-prop}{selection-color} and
2700 \l{Qt Style Sheets Reference#background-prop}{background}.
2703 \section2 selection-color*
2704 \target selection-color-prop
2706 \row \li \b Type \li \l{#Brush}{Brush} \br
2709 The foreground of selected text or items.
2711 This property is supported by all widgets that respect
2712 the \l QWidget::palette and that show selection text.
2714 If this property is not set, the default value is
2715 whatever is set for the palette's
2716 \l{QPalette::}{HighlightedText} role.
2720 \snippet code/doc_src_stylesheet.qdoc 72
2723 \l{#selection-background-color-prop}{selection-background-color}
2724 and \l{#color-prop}{color}.
2727 \section2 show-decoration-selected*
2728 \target show-decoration-selected-prop
2730 \row \li \b Type \li \l{#Boolean}{Boolean}
2733 Controls whether selections in a QListView cover the
2734 entire row or just the extent of the text.
2736 If this property is not specified, it defaults to the
2737 value specified by the current style for the
2738 \l{QStyle::}{SH_ItemView_ShowDecorationSelected} style
2743 \snippet code/doc_src_stylesheet.qdoc 73
2746 \target spacing-prop
2748 \row \li \b Type \li \l{#Length}{Length}
2751 Internal spacing in the widget.
2753 This property is supported by QCheckBox, checkable
2754 \l{QGroupBox}es, QMenuBar, and QRadioButton.
2756 If this property is not specified, the default value
2757 depends on the widget and on the current style.
2761 \snippet code/doc_src_stylesheet.qdoc 74
2763 See also \l{Qt Style Sheets Reference#padding-prop}{padding} and
2764 \l{#margin-prop}{margin}.
2767 \section2 subcontrol-origin*
2768 \target subcontrol-origin-prop
2770 \row \li \b Type \li \l{#Origin}{Origin}
2773 The origin rectangle of the subcontrol within the
2776 If this property is not specified, the default is \c
2781 \snippet code/doc_src_stylesheet.qdoc 75
2784 \l{Qt Style Sheets Reference#subcontrol-position-prop}{subcontrol-position}.
2786 \section2 subcontrol-position*
2787 \target subcontrol-position-prop
2789 \row \li \b Type \li \l{#Alignment}{Alignment}
2792 The alignment of the subcontrol within the origin
2793 rectangle specified by \l{Qt Style Sheets Reference#subcontrol-origin-prop}
2794 {subcontrol-origin}.
2796 If this property is not specified, it defaults to a value
2797 that depends on the subcontrol.
2801 \snippet code/doc_src_stylesheet.qdoc 76
2804 \l{Qt Style Sheets Reference#subcontrol-origin-prop}{subcontrol-origin}.
2806 \section2 titlebar-show-tooltips-on-buttons
2807 \target titlebar-show-tooltips-on-buttons-prop
2809 \row \li \b Type \li \c bool
2812 Whether tool tips are shown on window title bar buttons.
2815 \section2 widget-animation-duration*
2816 \target widget-animation-duration
2818 \row \li \b Type \li \l{#Number}{Number}
2821 How much an animation should last (in milliseconds).
2822 A value equal to zero means that the animations will be disabled.
2824 If this property is not specified, it defaults to the
2825 value specified by the current style for the
2826 \l{QStyle::}{SH_Widget_Animation_Duration} style hint.
2828 Available since Qt 5.10.
2832 \snippet code/doc_src_stylesheet.qdoc 162
2834 \section2 text-align
2835 \target text-align-prop
2837 \row \li \b Type \li \l{#Alignment}{Alignment}
2840 The alignment of text and icon within the contents of the widget.
2842 If this value is not specified, it defaults to the value
2843 that depends on the native style.
2847 \snippet code/doc_src_stylesheet.qdoc 77
2849 This property is currently supported only by QPushButton
2852 \section2 text-decoration
2861 Additional text effects.
2867 \row \li \b Type \li \l{#Length}{Length}
2870 If \l{#position-prop}{position} is \c relative (the
2871 default), moves a subcontrol by a certain offset
2874 If \l{#position-prop}{position} is \c absolute, the \c top
2875 property specifies the subcontrol's top edge in relation
2876 to the parent's top edge (see also
2877 \l{Qt Style Sheets Reference#subcontrol-origin-prop}{subcontrol-origin}).
2879 If this property is not specified, it defaults to \c 0.
2883 \snippet code/doc_src_stylesheet.qdoc 78
2885 See also \l{Qt Style Sheets Reference#left-prop}{left}, \l{#right-prop}{right}, and
2886 \l{#bottom-prop}{bottom}.
2891 \row \li \b Type \li \l{#Length}{Length}
2894 The width of a subcontrol (or a widget in some cases).
2896 If this property is not specified, it defaults to a value
2897 that depends on the subcontrol/widget and on the current style.
2899 \warning Unless otherwise specified, this property has no effect
2900 when set on widgets. If you want a widget with a fixed width, set
2901 the \l{#min-width-prop}{min-width} and
2902 \l{#max-width-prop}{max-width} to the same value.
2906 \snippet code/doc_src_stylesheet.qdoc 79
2908 See also \l{#height-prop}{height}.
2911 \section2 -qt-background-role
2913 \row \li \b Type \li \l{#paletterole}{PaletteRole}
2916 The \c{background-color} for the subcontrol or widget based on the
2919 \section2 -qt-style-features
2921 \row \li \b Type \li \c list
2924 The list of CSS properties that you want to apply Qt-specific styles on.
2926 \note The \c list can only include properties that are not pixmap-based.
2929 \target list of icons
2930 \section1 List of Icons
2932 Icons used in Qt can be customized using the following properties. Each of
2933 the properties listed in this section have the type \l{#Icon}{Icon}.
2935 Note that for icons to appear in buttons in a QDialogButtonBox, you need to
2936 set the dialogbuttonbox-buttons-have-icons property to true. Also, to
2937 customize the size of the icons, use the icon-size property.
2942 \li QStyle::StandardPixmap
2946 \li QStyle::SP_ArrowBack
2950 \li QStyle::SP_DriveCDIcon
2954 \li QStyle::SP_ComputerIcon
2958 \li QStyle::SP_DesktopIcon
2961 \li dialog-apply-icon
2962 \li QStyle::SP_DialogApplyButton
2965 \li dialog-cancel-icon
2966 \li QStyle::SP_DialogCancelButton
2969 \li dialog-close-icon
2970 \li QStyle::SP_DialogCloseButton
2973 \li dialog-discard-icon
2974 \li QStyle::SP_DialogDiscardButton
2977 \li dialog-help-icon
2978 \li QStyle::SP_DialogHelpButton
2982 \li QStyle::SP_DialogNoButton
2986 \li QStyle::SP_DialogOkButton
2989 \li dialog-open-icon
2990 \li QStyle::SP_DialogOpenButton
2993 \li dialog-reset-icon
2994 \li QStyle::SP_DialogResetButton
2997 \li dialog-save-icon
2998 \li QStyle::SP_DialogSaveButton
3002 \li QStyle::SP_DialogYesButton
3005 \li directory-closed-icon
3006 \li QStyle::SP_DirClosedIcon
3010 \li QStyle::SP_DirIcon
3013 \li directory-link-icon
3014 \li QStyle::SP_DirLinkIcon
3017 \li directory-open-icon
3018 \li QStyle::SP_DirOpenIcon
3021 \li dockwidget-close-icon
3022 \li QStyle::SP_DockWidgetCloseButton
3026 \li QStyle::SP_ArrowDown
3030 \li QStyle::SP_DriveDVDIcon
3034 \li QStyle::SP_FileIcon
3038 \li QStyle::SP_FileLinkIcon
3042 \li filedialog-backward-icon
3043 \li QStyle::SP_FileDialogBack
3047 \li filedialog-contentsview-icon
3048 \li QStyle::SP_FileDialogContentsView
3051 \li filedialog-detailedview-icon
3052 \li QStyle::SP_FileDialogDetailedView
3055 \li filedialog-end-icon
3056 \li QStyle::SP_FileDialogEnd
3059 \li filedialog-infoview-icon
3060 \li QStyle::SP_FileDialogInfoView
3063 \li filedialog-listview-icon
3064 \li QStyle::SP_FileDialogListView
3067 \li filedialog-new-directory-icon
3068 \li QStyle::SP_FileDialogNewFolder
3071 \li filedialog-parent-directory-icon
3072 \li QStyle::SP_FileDialogToParent
3075 \li filedialog-start-icon
3076 \li QStyle::SP_FileDialogStart
3080 \li QStyle::SP_DriveFDIcon
3084 \li QStyle::SP_ArrowForward
3088 \li QStyle::SP_DriveHDIcon
3092 \li QStyle::SP_DirHomeIcon
3095 \li lineedit-clear-button-icon
3096 \li QStyle::SP_LineEditClearButton
3100 \li QStyle::SP_ArrowLeft
3103 \li messagebox-critical-icon
3104 \li QStyle::SP_MessageBoxCritical
3107 \li messagebox-information-icon
3108 \li QStyle::SP_MessageBoxInformation
3111 \li messagebox-question-icon
3112 \li QStyle::SP_MessageBoxQuestion
3115 \li messagebox-warning-icon
3116 \li QStyle::SP_MessageBoxWarning
3120 \li QStyle::SP_DriveNetIcon
3124 \li QStyle::SP_ArrowRight
3127 \li titlebar-contexthelp-icon
3128 \li QStyle::SP_TitleBarContextHelpButton
3131 \li titlebar-maximize-icon
3132 \li QStyle::SP_TitleBarMaxButton
3135 \li titlebar-menu-icon
3136 \li QStyle::SP_TitleBarMenuButton
3139 \li titlebar-minimize-icon
3140 \li QStyle::SP_TitleBarMinButton
3143 \li titlebar-normal-icon
3144 \li QStyle::SP_TitleBarNormalButton
3147 \li titlebar-shade-icon
3148 \li QStyle::SP_TitleBarShadeButton
3151 \li titlebar-unshade-icon
3152 \li QStyle::SP_TitleBarUnshadeButton
3156 \li QStyle::SP_TrashIcon
3160 \li QStyle::SP_ArrowUp
3164 \section1 List of Property Types
3166 The following table summarizes the syntax and meaning of the
3167 different property types.
3176 \li \b Alignment \target Alignment
3182 \li Horizontal and/or vertical alignment.
3186 \snippet code/doc_src_stylesheet.qdoc 80
3189 \li \b Attachment \target Attachment
3190 \li \{ \c scroll \br
3192 \li Scroll or fixed attachment.
3195 \li \b Background \target Background
3196 \li \{ \l{#Brush}{Brush} \br
3198 | \l{#Repeat}{Repeat} \br
3199 | \l{#Alignment}{Alignment} \}*
3200 \li A sequence of \l{#Brush}{Brush}, \l{#Url}{Url},
3201 \l{#Repeat}{Repeat}, and \l{#Alignment}{Alignment}.
3204 \li \b Boolean \target Boolean
3206 \li True (\c 1) or false (\c 0).
3210 \snippet code/doc_src_stylesheet.qdoc 81
3213 \li \b Border \target Border
3214 \li \{ \l{#Border Style}{Border Style} \br
3215 | \l{#Length}{Length} \br
3216 | \l{#Brush}{Brush} \}*
3217 \li Shorthand border property.
3220 \li \b{Border Image} \target Border Image
3222 | \l{Url} \l{Number}\{4\} \br (\c stretch | \c repeat){0,2}
3223 \li A border image is an image that is composed of nine parts
3224 (top left, top center, top right, center left, center,
3225 center right, bottom left, bottom center, and bottom
3226 right). When a border of a certain size is required, the
3227 corner parts are used as is, and the top, right, bottom,
3228 and left parts are stretched or repeated to produce a
3229 border with the desired size.
3232 \l{http://www.w3.org/TR/css3-background/#the-border-image}
3233 {CSS3 Draft Specification} for details.
3236 \li \b{Border Style} \target Border Style
3239 | \c dot-dot-dash \br
3248 \li Specifies the pattern used to draw a border.
3249 See the \l{http://www.w3.org/TR/css3-background/#border-style}
3250 {CSS3 Draft Specification} for details.
3253 \li \b{Box Colors} \target Box Colors
3254 \li \l{#Brush}{Brush}\{1,4\}
3255 \li One to four occurrences of \l{#Brush}{Brush}, specifying the top,
3256 right, bottom, and left edges of a box, respectively. If
3257 the left color is not specified, it is taken to be the
3258 same as the right color. If the bottom color is not
3259 specified, it is taken to be the same as the top color. If
3260 the right color is not specified, it is taken to be the
3261 same as the top color.
3265 \snippet code/doc_src_stylesheet.qdoc 82
3268 \li \b{Box Lengths} \target Box Lengths
3269 \li \l{#Length}{Length}\{1,4\}
3270 \li One to four occurrences of \l{#Length}{Length}, specifying the
3271 top, right, bottom, and left edges of a box,
3272 respectively. If the left length is not specified, it is
3273 taken to be the same as the right length. If the bottom
3274 length is not specified, is it taken to be the same as the
3275 top length. If the right length is not specified, it is
3276 taken to be the same as the top length.
3280 \snippet code/doc_src_stylesheet.qdoc 83
3283 \li \b{Brush} \target Brush
3284 \li \l{#Color}{Color} \br
3287 \li Specifies a Color or a Gradient or an entry in the Palette.
3290 \li \b{Color} \target Color
3291 \li \tt{rgb(\e{r}, \e{g}, \e{b})} \br
3292 | \tt{rgba(\e{r}, \e{g}, \e{b}, \e{a})} \br
3293 | \tt{hsv(\e{h}, \e{s}, \e{v})} \br
3294 | \tt{hsva(\e{h}, \e{s}, \e{v}, \e{a})} \br
3295 | \tt{hsl(\e{h}, \e{s}, \e{l})} \br
3296 | \tt{hsla(\e{h}, \e{s}, \e{l}, \e{a})} \br
3297 | \tt{#\e{rrggbb}} \br
3298 | \l{QColor::fromString()}{Color Name} \br
3299 \li Specifies a color as RGB (red, green, blue), RGBA (red,
3300 green, blue, alpha), HSV (hue, saturation, value), HSVA
3301 (hue, saturation, value, alpha), HSL (hue, saturation,
3302 lightness), HSLA (hue, saturation, lightness, alpha) or a
3303 named color. The \c rgb() or \c rgba() syntax can be used
3304 with integer values between 0 and 255, or with percentages.
3305 The value of s, v, l and a in \c hsv(), \c hsva() \c hsl()
3306 or \c hsla() must all be in the range 0-255 or with
3307 percentages, the value of h must be in the range 0-359.
3308 The support for HSL(A) is available since 5.13.
3312 \snippet code/doc_src_stylesheet.qdoc 84
3314 \note The RGB colors allowed are the same as those allowed with
3316 \l{http://www.w3.org/TR/CSS21/syndata.html#color-units}{here}.
3319 \li \b{Font} \target Font
3320 \li (\l{#Font Style}{Font Style} | \l{#Font Weight}{Font Weight}){0,2} \l{#Font Size}{Font Size} String
3321 \li Shorthand font property.
3324 \li \b{Font Size} \target Font Size
3326 \li The size of a font.
3329 \li \b{Font Style} \target Font Style
3333 \li The style of a font.
3336 \li \b{Font Weight} \target Font Weight
3343 \li The weight of a font.
3346 \li \b{Gradient} \target Gradient
3347 \li \c qlineargradient \br
3348 | \c qradialgradient \br
3349 | \c qconicalgradient
3350 \li Specifies gradient fills. There are three types of gradient fills:
3353 \li \e{Linear} gradients interpolate colors between start and
3355 \li \e{Radial} gradients interpolate colors between a focal
3356 point and end points on a circle surrounding it.
3357 \li \e{Conical} gradients interpolate colors around a center
3361 Gradients are specified in Object Bounding Mode. Imagine the box
3362 in which the gradient is rendered, to have its top left corner at (0, 0)
3363 and its bottom right corner at (1, 1). Gradient parameters are
3364 then specified as percentages from 0 to 1. These values are
3365 extrapolated to actual box coordinates at runtime. It is possible
3366 specify values that lie outside the bounding box (-0.6 or 1.8, for
3369 \warning The stops have to appear sorted in ascending order.
3373 \snippet code/doc_src_stylesheet.qdoc 85
3376 \li \b{Icon} \target Icon
3377 \li (\l{#Url}{Url} (\c disabled | \c active | \c normal | \c selected)?
3378 (\c on | \c off)? )*
3379 \li A list of url, QIcon::Mode and QIcon::State.
3382 \snippet code/doc_src_stylesheet.qdoc 86
3385 \li \b{Length} \target Length
3386 \li \l{#Number}{Number} (\c px | \c pt | \c em | \c ex)?
3387 \li A number followed by a measurement unit. The CSS standard recommends
3388 that user agents must
3389 \l{http://www.w3.org/TR/CSS21/syndata.html#illegalvalues}{ignore}
3390 a declaration with an illegal value. In Qt, it is mandatory to
3391 specify measurement units. For compatibility with earlier versions
3392 of Qt, numbers without measurement units are treated as pixels
3393 in most contexts. The supported units are:
3397 \li \c pt: the size of one point (i.e., 1/72 of an inch)
3398 \li \c em: the size relative to the font size of the element
3399 (e.g., 2em means 2 times the size of the font)
3400 \li \c ex: the x-height of the font (i.e., the height of 'x')
3403 However, Qt is limited to font sizes in \c pt and \c px and any other
3404 size must be in \c px, \c em or \c ex.
3407 \li \b{Number} \target Number
3408 \li A decimal integer or a real number
3409 \li Examples: \c 0, \c 18, \c +127, \c -255, \c 12.34, \c -.5,
3413 \li \b{Origin} \target Origin
3418 \li Indicates which of four rectangles to use.
3421 \li \c margin: The margin rectangle. The margin falls outside the border.
3422 \li \c border: The border rectangle. This is where any border is drawn.
3423 \li \c padding: The padding rectangle. Unlike the margins,
3424 padding is located inside the border.
3425 \li \c content: The content rectangle. This specifies where
3426 the actual contents go, excluding any
3427 padding, border, or margin.
3430 See also \l{The Box Model}.
3433 \li \b{PaletteRole} \target PaletteRole
3434 \li \c alternate-base \br
3437 | \c bright-text \br
3439 | \c button-text \br
3442 | \c highlighted-text \br
3445 | \c link-visited \br
3451 | \c window-text \br
3452 \li These values correspond the \l{QPalette::ColorRole}{Color roles}
3453 in the widget's QPalette.
3456 \snippet code/doc_src_stylesheet.qdoc 87
3459 \li \b{Radius} \target Radius
3460 \li \l{#Length}{Length}\{1, 2\}
3461 \li One or two occurrences of \l{#Length}{Length}. If only one length is
3462 specified, it is used as the radius of the quarter circle
3463 defining the corner. If two lengths are specified, the
3464 first length is the horizontal radius of a quarter
3465 ellipse, whereas the second length is the vertical radius.
3468 \li \b{Repeat} \target Repeat
3473 \li A value indicating the nature of repetition.
3476 \li \c repeat-x: Repeat horizontally.
3477 \li \c repeat-y: Repeat vertically.
3478 \li \c repeat: Repeat horizontally and vertically.
3479 \li \c no-repeat: Don't repeat.
3483 \li \b{Url} \target Url
3484 \li \tt{url(\e{filename})}
3485 \li \tt{\e{filename}} is the name of a file on the local disk
3486 or stored using \l{The Qt Resource System}. Setting an
3487 image implicitly sets the width and height of the element.
3491 \section1 List of Pseudo-States
3493 The following pseudo-states are supported:
3500 \row \li \c :active \target active
3501 \li This state is set when the widget resides in an active window.
3504 \li \c :adjoins-item \target adjoins-item-ps
3505 \li This state is set when the \l{#branch-sub}{::branch} of a QTreeView
3506 is adjacent to an item.
3509 \li \c :alternate \target alternate-ps
3510 \li This state is set for every alternate row whe painting the row of
3511 a QAbstractItemView when QAbstractItemView::alternatingRowColors()
3515 \li \c :bottom \target bottom-ps
3516 \li The item is positioned at the bottom. For example, a QTabBar
3517 that has its tabs positioned at the bottom.
3520 \li \c :checked \target checked-ps
3521 \li The item is checked. For example, the
3522 \l{QAbstractButton::checked}{checked} state of QAbstractButton.
3525 \li \c :closable \target closable-ps
3526 \li The items can be closed. For example, the QDockWidget has the
3527 QDockWidget::DockWidgetClosable feature turned on.
3530 \li \c :closed \target closed-ps
3531 \li The item is in the closed state. For example, an non-expanded
3535 \li \c :default \target default-ps
3536 \li The item is the default. For example, a
3537 \l{QPushButton::default}{default} QPushButton or a default action
3541 \li \c :disabled \target disabled-ps
3542 \li The item is \l{QWidget::enabled}{disabled}.
3545 \li \c :editable \target editable-ps
3546 \li The QComboBox is editable.
3549 \li \c :edit-focus \target edit-focus-ps
3550 \li The item has edit focus (See QStyle::State_HasEditFocus). This state
3551 is available only for Qt Extended applications.
3554 \li \c :enabled \target enabled-ps
3555 \li The item is \l{QWidget::enabled}{enabled}.
3558 \li \c :exclusive \target exclusive-ps
3559 \li The item is part of an exclusive item group. For example, a menu
3560 item in a exclusive QActionGroup.
3563 \li \c :first \target first-ps
3564 \li The item is the first (in a list). For example, the first
3568 \li \c :flat \target flat-ps
3569 \li The item is flat. For example, a
3570 \l{QPushButton::flat}{flat} QPushButton.
3573 \li \c :floatable \target floatable-ps
3574 \li The items can be floated. For example, the QDockWidget has the
3575 QDockWidget::DockWidgetFloatable feature turned on.
3578 \li \c :focus \target focus-ps
3579 \li The item has \l{QWidget::hasFocus()}{input focus}.
3582 \li \c :has-children \target has-children-ps
3583 \li The item has children. For example, an item in a
3584 QTreeView that has child items.
3587 \li \c :has-siblings \target has-siblings-ps
3588 \li The item has siblings. For example, an item in a
3589 QTreeView that siblings.
3592 \li \c :horizontal \target horizontal-ps
3593 \li The item has horizontal orientation
3596 \li \c :hover \target hover-ps
3597 \li The mouse is hovering over the item.
3600 \li \c :indeterminate \target indeterminate-ps
3601 \li The item has indeterminate state. For example, a QCheckBox
3602 or QRadioButton is \l{Qt::PartiallyChecked}{partially checked}.
3605 \li \c :last \target last-ps
3606 \li The item is the last (in a list). For example, the last
3610 \li \c :left \target left-ps
3611 \li The item is positioned at the left. For example, a QTabBar
3612 that has its tabs positioned at the left.
3615 \li \c :maximized \target maximized-ps
3616 \li The item is maximized. For example, a maximized QMdiSubWindow.
3619 \li \c :middle \target middle-ps
3620 \li The item is in the middle (in a list). For example, a tab
3621 that is not in the beginning or the end in a QTabBar.
3624 \li \c :minimized \target minimized-ps
3625 \li The item is minimized. For example, a minimized QMdiSubWindow.
3628 \li \c :movable \target movable-ps
3629 \li The item can be moved around. For example, the QDockWidget has the
3630 QDockWidget::DockWidgetMovable feature turned on.
3633 \li \c :no-frame \target no-frame-ps
3634 \li The item has no frame. For example, a frameless QSpinBox
3638 \li \c :non-exclusive \target non-exclusive-ps
3639 \li The item is part of a non-exclusive item group. For example, a menu
3640 item in a non-exclusive QActionGroup.
3643 \li \c :off \target off-ps
3644 \li For items that can be toggled, this applies to items
3648 \li \c :on \target on-ps
3649 \li For items that can be toggled, this applies to widgets
3653 \li \c :only-one \target only-one-ps
3654 \li The item is the only one (in a list). For example, a lone tab
3658 \li \c :open \target open-ps
3659 \li The item is in the open state. For example, an expanded
3660 item in a QTreeView, or a QComboBox or QPushButton with
3664 \li \c :next-selected \target next-selected-ps
3665 \li The next item (in a list) is selected. For example, the
3666 selected tab of a QTabBar is next to this item.
3669 \li \c :pressed \target pressed-ps
3670 \li The item is being pressed using the mouse.
3673 \li \c :previous-selected \target previous-selected-ps
3674 \li The previous item (in a list) is selected. For example, a
3675 tab in a QTabBar that is next to the selected tab.
3678 \li \c :read-only \target read-only-ps
3679 \li The item is marked read only or non-editable. For example,
3680 a read only QLineEdit or a non-editable QComboBox.
3683 \li \c :right \target right-ps
3684 \li The item is positioned at the right. For example, a QTabBar
3685 that has its tabs positioned at the right.
3688 \li \c :selected \target selected-ps
3689 \li The item is selected. For example, the selected tab in
3690 a QTabBar or the selected item in a QMenu.
3693 \li \c :top \target top-ps
3694 \li The item is positioned at the top. For example, a QTabBar
3695 that has its tabs positioned at the top.
3698 \li \c :unchecked \target unchecked-ps
3700 \l{QAbstractButton::checked}{unchecked}.
3703 \li \c :vertical \target vertical-ps
3704 \li The item has vertical orientation.
3707 \li \c :window \target window-ps
3708 \li The widget is a window (i.e top level widget)
3713 \section1 List of Sub-Controls
3715 The following subcontrols are available:
3723 \li \c ::add-line \target add-line-sub
3724 \li The button to add a line of a QScrollBar.
3727 \li \c ::add-page \target add-page-sub
3728 \li The region between the handle (slider) and the \l{#add-line-sub}{add-line}
3732 \li \c ::branch \target branch-sub
3733 \li The branch indicator of a QTreeView.
3736 \li \c ::chunk \target chunk-sub
3737 \li The progress chunk of a QProgressBar.
3740 \li \c ::close-button \target close-button-sub
3741 \li The close button of a QDockWidget or tabs of QTabBar
3744 \li \c ::corner \target corner-sub
3745 \li The corner between two scrollbars in a QAbstractScrollArea
3748 \li \c ::down-arrow \target down-arrow-sub
3749 \li The down arrow of a QComboBox, QHeaderView (sort indicator),
3750 QScrollBar or QSpinBox.
3753 \li \c ::down-button \target down-button-sub
3754 \li The down button of a QScrollBar or a QSpinBox.
3757 \li \c ::drop-down \target drop-down-sub
3758 \li The drop-down button of a QComboBox.
3761 \li \c ::float-button \target float-button-sub
3762 \li The float button of a QDockWidget
3765 \li \c ::groove \target groove-sub
3766 \li The groove of a QSlider.
3769 \li \c ::indicator \target indicator-sub
3770 \li The indicator of a QAbstractItemView, a QCheckBox, a QRadioButton,
3771 a checkable QMenu item or a checkable QGroupBox.
3774 \li \c ::handle \target handle-sub
3775 \li The handle (slider) of a QScrollBar, a QSplitter, or a QSlider.
3778 \li \c ::icon \target icon-sub
3779 \li The icon of a QAbstractItemView or a QMenu.
3782 \li \c ::item \target item-sub
3783 \li An item of a QAbstractItemView, a QMenuBar, a QMenu, or
3787 \li \c ::left-arrow \target left-arrow-sub
3788 \li The left arrow of a QScrollBar.
3791 \li \c ::left-corner \target left-corner-sub
3792 \li The left corner of a QTabWidget. For example, this control can be
3793 used to control position the left corner widget in a QTabWidget.
3796 \li \c ::menu-arrow \target menu-arrow-sub
3797 \li The arrow of a QToolButton with a menu.
3800 \li \c ::menu-button \target menu-button-sub
3801 \li The menu button of a QToolButton.
3804 \li \c ::menu-indicator \target menu-indicator-sub
3805 \li The menu indicator of a QPushButton.
3808 \li \c ::right-arrow \target right-arrow-sub
3809 \li The right arrow of a QMenu or a QScrollBar.
3812 \li \c ::pane \target pane-sub
3813 \li The pane (frame) of a QTabWidget.
3816 \li \c ::right-corner \target right-corner-sub
3817 \li The right corner of a QTabWidget. For example, this control can be
3818 used to control the position the right corner widget in a QTabWidget.
3821 \li \c ::scroller \target scroller-sub
3822 \li The scroller of a QMenu or QTabBar.
3825 \li \c ::section \target section-sub
3826 \li The section of a QHeaderView.
3829 \li \c ::separator \target separator-sub
3830 \li The separator of a QMenu or in a QMainWindow.
3833 \li \c ::sub-line \target sub-line-sub
3834 \li The button to subtract a line of a QScrollBar.
3837 \li \c ::sub-page \target sub-page-sub
3838 \li The region between the handle (slider) and the \l{#sub-line-sub}{sub-line}
3842 \li \c ::tab \target tab-sub
3843 \li The tab of a QTabBar or QToolBox.
3846 \li \c ::tab-bar \target tab-bar-sub
3847 \li The tab bar of a QTabWidget. This subcontrol exists only to
3848 control the position of the QTabBar inside the QTabWidget. To
3849 style the tabs using the \l{#tab-sub}{::tab} subcontrol.
3852 \li \c ::tear \target tear-sub
3853 \li The tear indicator of a QTabBar.
3856 \li \c ::tearoff \target tearoff-sub
3857 \li The tear-off indicator of a QMenu.
3860 \li \c ::text \target text-ps
3861 \li The text of a QAbstractItemView.
3864 \li \c ::title \target title-sub
3865 \li The title of a QGroupBox or a QDockWidget.
3868 \li \c ::up-arrow \target up-arrow-sub
3869 \li The up arrow of a QHeaderView (sort indicator), QScrollBar
3873 \li \c ::up-button \target up-button-sub
3874 \li The up button of a QSpinBox.
3878 See \l{Customizing the QPushButton's Menu Indicator Sub-Control}
3879 for an example of how to customize a subcontrol.
3883 \page stylesheet-examples.html
3884 \previouspage Qt Style Sheets Reference
3885 \title Qt Style Sheets Examples
3887 We will now see a few examples to get started with using Qt Style Sheets.
3890 \section1 Style Sheet Usage
3892 \section2 Customizing the Foreground and Background Colors
3894 Let's start by setting yellow as the background color of all
3895 \l{QLineEdit}s in an application. This could be achieved like
3898 \snippet code/doc_src_stylesheet.cpp 88
3900 If we want the property to apply only to the \l{QLineEdit}s that are
3901 children (or grandchildren or grand-grandchildren) of a specific dialog,
3902 we would rather do this:
3904 \snippet code/doc_src_stylesheet.cpp 89
3906 If we want the property to apply only to one specific QLineEdit,
3907 we can give it a name using QObject::setObjectName() and use an
3908 ID Selector to refer to it:
3910 \snippet code/doc_src_stylesheet.cpp 90
3912 Alternatively, we can set the
3913 \l{Qt Style Sheets Reference#background-prop}{background-color} property directly on the
3914 QLineEdit, omitting the selector:
3916 \snippet code/doc_src_stylesheet.cpp 91
3918 To ensure a good contrast, we should also specify a suitable
3921 \snippet code/doc_src_stylesheet.cpp 92
3923 It might be a good idea to change the colors used for selected
3926 \snippet code/doc_src_stylesheet.cpp 93
3929 \section2 Customizing Using Dynamic Properties
3931 There are many situations where we need to present a form that
3932 has mandatory fields. To indicate to the user that the field is
3933 mandatory, one effective (albeit esthetically dubious) solution
3934 is to use yellow as the background color for those fields. It
3935 turns out this is very easy to implement using Qt Style Sheets.
3936 First, we would use the following application-wide style sheet:
3938 \snippet code/doc_src_stylesheet.qdoc 94
3940 This means that every widget whose \c mandatoryField Qt property
3941 is set to true would have a yellow background.
3943 Then, for each mandatory field widget, we would simply create a
3944 \c mandatoryField property on the fly and set it to true. For
3947 \snippet code/doc_src_stylesheet.cpp 95
3949 \section2 Customizing a QPushButton Using the Box Model
3951 This time, we will show how to create a red QPushButton. This
3952 QPushButton would presumably be connected to a very destructive
3955 First, we are tempted to use this style sheet:
3957 \snippet code/doc_src_stylesheet.qdoc 96
3959 However, the result is a boring, flat button with no borders:
3961 \image stylesheet-redbutton1.png A flat red button
3963 What happened is this:
3966 \li We have made a request that cannot be satisfied using the
3967 native styles alone (e.g., the Windows Vista theme engine doesn't
3968 let us specify the background color of a button).
3969 \li Therefore, the button is rendered using style sheets.
3970 \li We haven't specified any values for
3971 \l{Qt Style Sheets Reference#border-width-prop}{border-width} and
3972 \l{Qt Style Sheets Reference#border-style-prop}{border-style}, so by default we obtain
3973 a 0-pixel wide border of style \c none.
3976 Let's improve the situation by specifying a border:
3978 \snippet code/doc_src_stylesheet.qdoc 97
3980 \image stylesheet-redbutton2.png A red button with a beige border
3982 Things look already a lot better. But the button looks a bit
3983 cramped. Let's specify some spacing between the border and the
3984 text using the \l{Qt Style Sheets Reference#padding-prop}{padding}. Additionally, we will
3985 enforce a minimum width, round the corners, and specify a larger
3986 font to make the button look nicer:
3988 \snippet code/doc_src_stylesheet.qdoc 98
3990 \image stylesheet-redbutton3.png A red button with a round beige border and big, bold text
3992 The only issue remaining is that the button doesn't react when we
3993 press it. We can fix this by specifying a slightly different
3994 background color and use a different border style.
3996 \snippet code/doc_src_stylesheet.qdoc 99
3998 \section2 Customizing the QPushButton's Menu Indicator Sub-Control
4000 Subcontrols give access to the sub-elements of a widget. For
4001 example, a QPushButton associated with a menu (using
4002 QPushButton::setMenu()) has a menu indicator. Let's customize
4003 the menu indicator for the red push button:
4005 \snippet code/doc_src_stylesheet.qdoc 100
4007 By default, the menu indicator is located at the bottom-right
4008 corner of the padding rectangle. We can change this by specifying
4009 \l{Qt Style Sheets Reference#subcontrol-position-prop}{subcontrol-position} and
4010 \l{Qt Style Sheets Reference#subcontrol-origin-prop}{subcontrol-origin} to anchor the
4011 indicator differently. We can also use \l{Qt Style Sheets Reference#top-prop}{top} and
4012 \l{Qt Style Sheets Reference#left-prop}{left} to move the indicator by a few pixels. For
4015 \snippet code/doc_src_stylesheet.qdoc 101
4017 This positions the \c myindicator.png to the center right of the
4018 QPushButton's \l{Qt Style Sheets Reference#padding-prop}{padding} rectangle (see
4019 \l{Qt Style Sheets Reference#subcontrol-origin-prop}{subcontrol-origin} for more
4022 \section2 Complex Selector Example
4024 Since red seems to be our favorite color, let's make the text in
4025 QLineEdit red by setting the following application-wide
4028 \snippet code/doc_src_stylesheet.qdoc 102
4030 However, we would like to give a visual indication that a
4031 QLineEdit is read-only by making it appear gray:
4033 \snippet code/doc_src_stylesheet.qdoc 103
4035 At some point, our design team comes with the requirement that
4036 all \l{QLineEdit}s in the registration form (with the
4037 \l{QObject::objectName}{object name} \c registrationDialog) to be
4040 \snippet code/doc_src_stylesheet.qdoc 104
4042 A few UI design meetings later, we decide that all our
4043 \l{QDialog}s should have brown colored \l{QLineEdit}s:
4045 \snippet code/doc_src_stylesheet.qdoc 105
4047 Quiz: What happens if we have a read-only QLineEdit in a QDialog?
4048 [Hint: The \l{The Style Sheet Syntax#Conflict Resolution}{Conflict Resolution} section above explains
4049 what happens in cases like this.]
4051 \section1 Customizing Specific Widgets
4053 This section provides examples to customize specific widgets using Style Sheets.
4055 \section2 Customizing QAbstractScrollArea
4057 The background of any QAbstractScrollArea (Item views, QTextEdit
4058 and QTextBrowser) can be set using the background properties. For example,
4059 to set a background-image that scrolls with the scroll bar:
4060 \snippet code/doc_src_stylesheet.qdoc 106
4062 If the background-image is to be fixed with the viewport:
4063 \snippet code/doc_src_stylesheet.qdoc 107
4065 \section2 Customizing QCheckBox
4067 Styling of a QCheckBox is almost identical to styling a QRadioButton. The
4068 main difference is that a tristate QCheckBox has an indeterminate state.
4070 \snippet code/doc_src_stylesheet.qdoc 108
4072 \section2 Customizing QComboBox
4074 We will look at an example where the drop down button of a QComboBox
4075 appears "merged" with the combo box frame.
4077 \snippet code/doc_src_stylesheet.qdoc 109
4079 The pop-up of the QComboBox is a QAbstractItemView and is styled using
4080 the descendant selector:
4081 \snippet code/doc_src_stylesheet.qdoc 110
4083 \section2 Customizing QDockWidget
4085 The title bar and the buttons of a QDockWidget can be customized as
4088 \snippet code/doc_src_stylesheet.qdoc 111
4090 If one desires to move the dock widget buttons to the left, the following
4091 style sheet can be used:
4093 \snippet code/doc_src_stylesheet.qdoc 112
4095 \note To customize the separator (resize handle) of a QDockWidget,
4096 use QMainWindow::separator.
4098 \section2 Customizing QFrame
4100 A QFrame is styled using the \l{The Box Model}.
4102 \snippet code/doc_src_stylesheet.qdoc 113
4104 \section2 Customizing QGroupBox
4106 Let us look at an example that moves the QGroupBox's title to
4109 \snippet code/doc_src_stylesheet.qdoc 114
4111 For a checkable QGroupBox, use the \{#indicator-sub}{::indicator} subcontrol
4112 and style it exactly like a QCheckBox (i.e)
4114 \snippet code/doc_src_stylesheet.qdoc 115
4116 \section2 Customizing QHeaderView
4118 QHeaderView is customized as follows:
4120 \snippet code/doc_src_stylesheet.qdoc 116
4122 \section2 Customizing QLineEdit
4124 The frame of a QLineEdit is styled using the \l{The Box Model}. To
4125 create a line edit with rounded corners, we can set:
4126 \snippet code/doc_src_stylesheet.qdoc 117
4128 The password character of line edits that have QLineEdit::Password
4129 echo mode can be set using:
4130 \snippet code/doc_src_stylesheet.qdoc 118
4132 The background of a read only QLineEdit can be modified as below:
4133 \snippet code/doc_src_stylesheet.qdoc 119
4135 \section2 Customizing QListView
4137 The background color of alternating rows can be customized using the following
4140 \snippet code/doc_src_stylesheet.qdoc 120
4142 To provide a special background when you hover over items, we can use the
4143 \l{item-sub}{::item} subcontrol. For example,
4145 \snippet code/doc_src_stylesheet.qdoc 121
4147 \section2 Customizing QMainWindow
4149 The separator of a QMainWindow can be styled as follows:
4151 \snippet code/doc_src_stylesheet.qdoc 122
4153 \section2 Customizing QMenu
4155 Individual items of a QMenu are styled using the 'item' subcontrol as
4158 \snippet code/doc_src_stylesheet.qdoc 123
4160 For a more advanced customization, use a style sheet as follows:
4162 \snippet code/doc_src_stylesheet.qdoc 124
4164 \section2 Customizing QMenuBar
4166 QMenuBar is styled as follows:
4168 \snippet code/doc_src_stylesheet.qdoc 125
4170 \section2 Customizing QProgressBar
4172 The QProgressBar's \l{stylesheet-reference.html#border-prop}{border},
4173 \l{stylesheet-reference.html#chunk-sub}{chunk}, and
4174 \l{stylesheet-reference.html#text-align-prop}{text-align} can be customized using
4175 style sheets. However, if one property or sub-control is customized,
4176 all the other properties or sub-controls must be customized as well.
4178 \image progressBar-stylesheet.png
4180 For example, we change the \l{stylesheet-reference.html#border-prop}
4181 {border} to grey and the \l{stylesheet-reference.html#chunk-sub}{chunk}
4184 \snippet code/doc_src_stylesheet.qdoc 126
4186 This leaves the \l{stylesheet-reference.html#text-align-prop}
4187 {text-align}, which we customize by positioning the text in the center of
4190 \snippet code/doc_src_stylesheet.qdoc 127
4192 A \l{stylesheet-reference.html#margin-prop}{margin} can be included to
4193 obtain more visible chunks.
4195 \image progressBar2-stylesheet.png
4197 In the screenshot above, we use a
4198 \l{stylesheet-reference.html#margin-prop}{margin} of 0.5 pixels.
4200 \snippet code/doc_src_stylesheet.qdoc 128
4202 \section2 Customizing QPushButton
4204 A QPushButton is styled as follows:
4205 \snippet code/doc_src_stylesheet.qdoc 129
4207 For a QPushButton with a menu, use the
4208 \l{Qt Style Sheets Reference#menu-indicator-sub}{::menu-indicator}
4211 \snippet code/doc_src_stylesheet.qdoc 130
4213 Checkable QPushButton have the \l{Qt Style Sheets Reference#checked-ps}
4214 {:checked} pseudo state set.
4216 \section2 Customizing QRadioButton
4218 The indicator of a QRadioButton can be changed using:
4219 \snippet code/doc_src_stylesheet.qdoc 131
4221 \section2 Customizing QScrollBar
4223 The QScrollBar can be styled using its subcontrols like
4224 \l{stylesheet-reference.html#handle-sub}{handle},
4225 \l{stylesheet-reference.html#add-line-sub}{add-line},
4226 \l{stylesheet-reference.html#sub-line-sub}{sub-line}, and so on. Note that
4227 if one property or sub-control is customized, all the other properties or
4228 sub-controls must be customized as well.
4230 \image stylesheet-scrollbar1.png
4232 The scroll bar above has been styled in aquamarine with a solid grey
4235 \snippet code/doc_src_stylesheet.qdoc 132
4237 \snippet code/doc_src_stylesheet.qdoc 133
4239 \snippet code/doc_src_stylesheet.qdoc 134
4241 The \l{stylesheet-reference.html#left-arrow-sub}{left-arrow} and
4242 \l{stylesheet-reference.html#right-arrow-sub}{right-arrow} have a solid grey
4243 border with a white background. As an alternative, you could also embed the
4246 \snippet code/doc_src_stylesheet.qdoc 135
4248 If you want the scroll buttons of the scroll bar to be placed together
4249 (instead of the edges) like on \macos, you can use the following
4251 \snippet code/doc_src_stylesheet.qdoc 136
4253 The scroll bar using the above stylesheet looks like this:
4254 \image stylesheet-scrollbar2.png
4257 To customize a vertical scroll bar use a style sheet similar to the following:
4258 \snippet code/doc_src_stylesheet.qdoc 137
4260 \section2 Customizing QSizeGrip
4262 QSizeGrip is usually styled by just setting an image.
4264 \snippet code/doc_src_stylesheet.qdoc 138
4266 \section2 Customizing QSlider
4268 You can style horizontal slider as below:
4269 \snippet code/doc_src_stylesheet.qdoc 139
4271 If you want to change the color of the slider parts before and after the handle, you can use the add-page
4272 and sub-page subcontrols. For example, for a vertical slider:
4274 \snippet code/doc_src_stylesheet.qdoc 140
4276 \section2 Customizing QSpinBox
4278 QSpinBox can be completely customized as below (the style sheet has commentary inline):
4280 \snippet code/doc_src_stylesheet.qdoc 141
4283 \section2 Customizing QSplitter
4285 A QSplitter derives from a QFrame and hence can be styled like a QFrame.
4286 The grip or the handle is customized using the
4287 \l{Qt Style Sheets Reference#handle-sub}{::handle} subcontrol.
4289 \snippet code/doc_src_stylesheet.qdoc 142
4291 \section2 Customizing QStatusBar
4293 We can provide a background for the status bar and a border for items
4294 inside the status bar as follows:
4295 \snippet code/doc_src_stylesheet.qdoc 143
4297 Note that widgets that have been added to the QStatusBar can be styled
4298 using the descendant declaration (i.e)
4299 \snippet code/doc_src_stylesheet.qdoc 144
4301 \section2 Customizing QTabWidget and QTabBar
4303 \image tabWidget-stylesheet1.png
4305 For the screenshot above, we need a stylesheet as follows:
4307 \snippet code/doc_src_stylesheet.qdoc 145
4309 Often we require the tabs to overlap to look like below:
4310 \image tabWidget-stylesheet2.png
4312 For a tab widget that looks like above, we make use of
4313 \l{https://doc.qt.io/qt-5/stylesheet-customizing.html#the-box-model}
4314 {negative margins}. Negative values draw the element closer to its
4315 neighbors than it would be by default. The resulting stylesheet
4318 \snippet code/doc_src_stylesheet.qdoc 146
4320 To move the tab bar to the center (as below), we require the following stylesheet:
4321 \image tabWidget-stylesheet3.png
4323 \snippet code/doc_src_stylesheet.qdoc 147
4325 The tear indicator and the scroll buttons can be further customized as follows:
4326 \snippet code/doc_src_stylesheet.qdoc 148
4328 Since Qt 4.6 the close button can be customized as follow:
4329 \snippet code/doc_src_stylesheet.qdoc 159
4331 \section2 Customizing QTableView
4333 Suppose we'd like our selected item in QTableView to have bubblegum pink
4334 fade to white as its background.
4336 \image tableWidget-stylesheet.png
4338 This is possible with the
4339 \l{stylesheet-reference.html#selection-background-color-prop}
4340 {selection-background-color} property and the syntax required is:
4342 \snippet code/doc_src_stylesheet.qdoc 149
4344 The corner widget can be customized using the following style sheet
4346 \snippet code/doc_src_stylesheet.qdoc 150
4348 The QTableView's checkbox indicator can also be customized. In the
4349 following snippet the indicator \c background-color in unchecked state is
4352 \snippet code/doc_src_stylesheet.qdoc 161
4354 \section2 Customizing QToolBar
4356 The background and the handle of a QToolBar is customized as below:
4357 \snippet code/doc_src_stylesheet.qdoc 151
4359 \section2 Customizing QToolBox
4361 The tabs of the QToolBox are customized using the 'tab' subcontrol.
4363 \snippet code/doc_src_stylesheet.qdoc 152
4365 \section2 Customizing QToolButton
4367 There are three types of QToolButtons.
4369 \li The QToolButton has no menu. In this case, the QToolButton is styled
4370 exactly like QPushButton. See
4371 \l{#Customizing QPushButton}{Customizing QPushButton} for an
4374 \li The QToolButton has a menu and has the QToolButton::popupMode set to
4375 QToolButton::DelayedPopup or QToolButton::InstantPopup. In this case,
4376 the QToolButton is styled exactly like a QPushButton with a menu.
4377 See \l{#Customizing QPushButton}{Customizing QPushButton} for an
4378 example of the usage of the menu-indicator pseudo state.
4380 \li The QToolButton has its QToolButton::popupMode set to
4381 QToolButton::MenuButtonPopup. In this case, we style it as follows:
4384 \snippet code/doc_src_stylesheet.qdoc 153
4387 \section2 Customizing QToolTip
4389 QToolTip is customized exactly like a QLabel. In addition, for platforms
4390 that support it, the opacity property may be set to adjust the opacity.
4393 \snippet code/doc_src_stylesheet.qdoc 154
4395 \section2 Customizing QTreeView
4397 The background color of alternating rows can be customized using the following
4400 \snippet code/doc_src_stylesheet.qdoc 155
4402 To provide a special background when you hover over items, we can use the
4403 \l{item-sub}{::item} subcontrol. For example,
4404 \snippet code/doc_src_stylesheet.qdoc 156
4406 The branches of a QTreeView are styled using the
4407 \l{Qt Style Sheets Reference#branch-sub}{::branch} subcontrol. The
4408 following stylesheet color codes the various states when drawing
4411 \snippet code/doc_src_stylesheet.qdoc 157
4413 Colorful, though it is, a more useful example can be made using the
4418 \li \inlineimage stylesheet-vline.png
4419 \li \inlineimage stylesheet-branch-more.png
4420 \li \inlineimage stylesheet-branch-end.png
4421 \li \inlineimage stylesheet-branch-closed.png
4422 \li \inlineimage stylesheet-branch-open.png
4427 \li branch-closed.png
4431 \snippet code/doc_src_stylesheet.qdoc 158
4433 The resulting tree view looks like this:
4435 \image stylesheet-treeview.png
4437 \sa {Supported HTML Subset}, QStyle
4440 \section1 Common Mistakes
4442 This section lists some common mistakes when using stylesheets.
4444 \section2 QPushButton and images
4446 When styling a QPushButton, it is often desirable to use an image as the
4447 button graphic. It is common to try the
4448 \l{Qt Style Sheets Reference#background-image-prop}{background-image}
4450 but this has a number of drawbacks: For instance, the background will
4451 often appear hidden behind the button decoration, because it is not
4452 considered a background. In addition, if the button is resized, the
4453 entire background will be stretched or tiled, which does not
4456 It is better to use the
4457 \l{Qt Style Sheets Reference#border-image-prop}{border-image}
4458 property, as it will always display the image,
4459 regardless of the background (you can combine it with a background if it
4460 has alpha values in it), and it has special settings to deal with button
4463 Consider the following snippet:
4465 \snippet stylesheet/common-mistakes.cpp 1
4467 This will produce a button looking like this:
4469 \image stylesheet-border-image-normal.png
4471 The numbers after the url gives the top, right, bottom and left number of
4472 pixels, respectively. These numbers correspond to the border and should not
4473 stretch when the size changes.
4474 Whenever you resize the button, the middle part of the image will stretch
4475 in both directions, while the pixels specified in the stylesheet
4476 will not. This makes the borders of the button look more natural, like
4481 \li \inlineimage stylesheet-border-image-stretched.png
4488 \li \inlineimage stylesheet-border-image-wrong.png