1 /****************************************************************************
3 ** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies).
4 ** All rights reserved.
5 ** Contact: Nokia Corporation (qt-info@nokia.com)
7 ** This file is part of the documentation of the Qt Toolkit.
9 ** $QT_BEGIN_LICENSE:FDL$
10 ** GNU Free Documentation License
11 ** Alternatively, this file may be used under the terms of the GNU Free
12 ** Documentation License version 1.3 as published by the Free Software
13 ** Foundation and appearing in the file included in the packaging of
17 ** Alternatively, this file may be used in accordance with the terms
18 ** and conditions contained in a signed written agreement between you
26 ****************************************************************************/
30 \title Qt Style Sheets
31 \brief How to use style sheets to customize the appearance of widgets.
33 \ingroup frameworks-technologies
34 \ingroup qt-basic-concepts
35 \ingroup qt-gui-concepts
37 \previouspage {Styles and Style Aware Widgets}{Styles}
38 \contentspage Widgets and Layouts
39 \nextpage The Style Sheet Syntax
44 Qt Style Sheets are a powerful mechanism that allows you to
45 customize the appearance of widgets, in addition to what is
46 already possible by subclassing QStyle. The concepts,
47 terminology, and syntax of Qt Style Sheets are heavily inspired
48 by HTML \l{http://www.w3.org/Style/CSS/}{Cascading Style Sheets
49 (CSS)} but adapted to the world of widgets.
55 \i \l{The Style Sheet Syntax}
56 \i \l{Qt Designer Integration}
57 \i \l{Customizing Qt Widgets Using Style Sheets}
58 \i \l{Qt Style Sheets Reference}
59 \i \l{Qt Style Sheets Examples}
65 Styles sheets are textual specifications that can be set on the
66 whole application using QApplication::setStyleSheet() or on a
67 specific widget (and its children) using
68 QWidget::setStyleSheet(). If several style sheets are set at
69 different levels, Qt derives the effective style sheet from all
70 of those that are set. This is called cascading.
72 For example, the following style sheet specifies that all
73 \l{QLineEdit}s should use yellow as their background color, and
74 all \l{QCheckBox}es should use red as the text color:
76 \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 0
78 For this kind of customization, style sheets are much more
79 powerful than QPalette. For example, it might be tempting to set
80 the QPalette::Button role to red for a QPushButton to obtain a
81 red push button. However, this wasn't guaranteed to work for all
82 styles, because style authors are restricted by the different
83 platforms' guidelines and (on Windows XP and Mac OS X) by the
86 Style sheets let you perform all kinds of customizations that are
87 difficult or impossible to perform using QPalette alone. If you
88 want yellow backgrounds for mandatory fields, red text for
89 potentially destructive push buttons, or fancy check boxes, style
90 sheets are the answer.
92 Style sheets are applied on top of the current \l{QStyle}{widget
93 style}, meaning that your applications will look as native as
94 possible, but any style sheet constraints will be taken into
95 consideration. Unlike palette fiddling, style sheets offer
96 guarantees: If you set the background color of a QPushButton to be
97 red, you can be assured that the button will have a red background
98 in all styles, on all platforms. In addition, \l{Qt Designer}
99 provides style sheet integration, making it easy to view the effects
100 of a style sheet in different \l{QStyle}{widget styles}.
102 In addition, style sheets can be used to provide a distinctive
103 look and feel for your application, without having to subclass
104 QStyle. For example, you can specify arbitrary images for radio
105 buttons and check boxes to make them stand out. Using this
106 technique, you can also achieve minor customizations that would
107 normally require subclassing several style classes, such as
108 specifying a \l{QStyle::styleHint()}{style hint}. The
109 \l{widgets/stylesheet}{Style Sheet} example depicted below defines
110 two distinctive style sheets that you can try out and modify at
114 \row \o \inlineimage stylesheet-coffee-xp.png
115 \o \inlineimage stylesheet-pagefold.png
116 \row \o Coffee theme running on Windows XP
117 \o Pagefold theme running on Windows XP
121 \row \o \inlineimage stylesheet-coffee-cleanlooks.png
122 \o \inlineimage stylesheet-pagefold-mac.png
123 \row \o Coffee theme running on Ubuntu Linux
124 \o Pagefold theme running on Mac OS X
127 When a style sheet is active, the QStyle returned by QWidget::style()
128 is a wrapper "style sheet" style, \e not the platform-specific style. The
129 wrapper style ensures that any active style sheet is respected and
130 otherwise forwards the drawing operations to the underlying,
131 platform-specific style (e.g., QWindowsXPStyle on Windows XP).
133 Since Qt 4.5, Qt style sheets fully supports Mac OS X.
135 \warning Qt style sheets are currently not supported for custom QStyle
136 subclasses. We plan to address this in some future release.
140 \page stylesheet-syntax.html
141 \contentspage {Qt Style Sheet}{Contents}
142 \previouspage Qt Style Sheet
143 \nextpage Qt Designer Integration
144 \title The Style Sheet Syntax
146 Qt Style Sheet terminology and syntactic rules are almost
147 identical to those of HTML CSS. If you already know CSS, you can
148 probably skim quickly through this section.
152 \section1 Style Rules
154 Style sheets consist of a sequence of style rules. A \e{style
155 rule} is made up of a selector and a declaration. The
156 \e{selector} specifies which widgets are affected by the rule;
157 the \e{declaration} specifies which properties should be set on
158 the widget. For example:
160 \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 1
162 In the above style rule, \c QPushButton is the selector and \c{{
163 color: red }} is the declaration. The rule specifies that
164 QPushButton and its subclasses (e.g., \c MyPushButton) should use
165 red as their foreground color.
167 Qt Style Sheet is generally case insensitive (i.e., \c color,
168 \c Color, \c COLOR, and \c cOloR refer to the same property).
169 The only exceptions are class names,
170 \l{QObject::setObjectName()}{object names}, and Qt property
171 names, which are case sensitive.
173 Several selectors can be specified for the same declaration,
174 using commas (\c{,}) to separate the selectors. For example,
177 \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 2
179 is equivalent to this sequence of three rules:
181 \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 3
183 The declaration part of a style rule is a list of
184 \tt{\e{property}: \e{value}} pairs, enclosed in braces (\c{{}})
185 and separated with semicolons. For example:
187 \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 4
189 See the \l{List of Properties} section below for the list of
190 properties provided by Qt widgets.
192 \section1 Selector Types
194 All the examples so far used the simplest type of selector, the
195 Type Selector. Qt Style Sheets support all the
196 \l{http://www.w3.org/TR/REC-CSS2/selector.html#q1}{selectors
197 defined in CSS2}. The table below summarizes the most useful
207 \o Universal Selector
209 \o Matches all widgets.
214 \o Matches instances of QPushButton and of its subclasses.
218 \o \c{QPushButton[flat="false"]}
219 \o Matches instances of QPushButton that are not
220 \l{QPushButton::}{flat}. You may use this selector to test
221 for any Qt \l{Qt's Property System}{property} that supports
222 QVariant::toString() (see the \l{QVariant::}{toString()}
223 function documentation for details). In addition, the
224 special \c class property is supported, for the name of the
227 This selector may also be used to test dynamic properties.
228 For more information on customization using dynamic properties,
229 refer to \l{Customizing Using Dynamic Properties}.
231 Instead of \c =, you can also use \c ~= to test whether a
232 Qt property of type QStringList contains a given QString.
234 \warning If the value of the Qt property changes after the
235 style sheet has been set, it might be necessary to force a
236 style sheet recomputation. One way to achieve this is to
237 unset the style sheet and set it again.
242 \o Matches instances of QPushButton, but not of its subclasses.
244 This is equivalent to \c{*[class~="QPushButton"]}.
247 \o ID \target ID Selector
249 \o \c{QPushButton#okButton}
250 \o Matches all QPushButton instances whose
251 \l{QObject::objectName}{object name} is \c okButton.
254 \o Descendant Selector
255 \o \c{QDialog QPushButton}
256 \o Matches all instances of QPushButton that are descendants
257 (children, grandchildren, etc.) of a QDialog.
261 \o \c{QDialog > QPushButton}
262 \o Matches all instances of QPushButton that are direct
263 children of a QDialog.
266 \section1 Sub-Controls
268 For styling complex widgets, it is necessary to access subcontrols of the
269 widget, such as the drop-down button of a QComboBox or the up and down
270 arrows of a QSpinBox. Selectors may contain \e{subcontrols} that make it
271 possible to restrict the application of a rule to specific widget
272 subcontrols. For example:
274 \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 5
276 The above rule styles the drop-down button of all \l{QComboBox}es.
277 Although the double-colon (\c{::}) syntax is reminiscent of CSS3
278 Pseudo-Elements, Qt Sub-Controls differ conceptually from these and have
279 different cascading semantics.
281 Sub-controls are always positioned with respect to another element - a
282 reference element. This reference element could be the widget or another
283 Sub-control. For example, the \l{Qt Style Sheets Reference#drop-down-sub}
284 {::drop-down} of a QComboBox is placed, by default, in the top right corner
285 of the Padding rectangle of the QComboBox. The
286 \l{Qt Style Sheets Reference#drop-down-sub}{::drop-down} is placed,
287 by default, in the Center of the Contents rectangle of the
288 \l{Qt Style Sheets Reference#drop-down-sub}{::drop-down} Sub-control. See
289 the \l{List of Stylable Widgets} below for the Sub-controls to use to
290 style a widget and their default positions.
292 The origin rectangle to be used can be changed using the
293 \l{Qt Style Sheets Reference#subcontrol-origin-prop}{subcontrol-origin}
294 property. For example, if we want to place the drop-down in the margin
295 rectangle of the QComboBox instead of the default Padding rectangle, we
298 \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 6
300 The alignment of the drop-down within the Margin rectangle is changed
301 using \l{Qt Style Sheets Reference#subcontrol-position-prop}
302 {subcontrol-position} property.
304 The \l{Qt Style Sheets Reference#width-prop}{width} and
305 \l{Qt Style Sheets Reference#height-prop}{height} properties can be used
306 to control the size of the Sub-control. Note that setting a
307 \l{Qt Style Sheets Reference#image-prop}{image} implicitly sets the size
310 The relative positioning scheme
311 (\l{Qt Style Sheets Reference#position-prop}{position} : relative),
312 allows the position of the Sub-Control to be offset from its initial
313 position. For example, when the QComboBox's drop-down button is
314 pressed, we might like the arrow inside to be offset to give a
315 "pressed" effect. To achieve this, we can specify:
317 \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 7
319 The absolute positioning scheme
320 (\l{Qt Style Sheets Reference#position-prop}{position} : absolute),
321 allows the position and size of the Sub-control to be changed with
322 respect to the reference element.
324 Once positioned, they are treated the same as widgets and can be styled
325 using the \l{box model}.
327 See the \l{List of Sub-Controls} below for a list of supported
328 sub-controls, and \l{Customizing the QPushButton's Menu Indicator
329 Sub-Control} for a realistic example.
331 \note With complex widgets such as QComboBox and QScrollBar, if one
332 property or sub-control is customized, \bold{all} the other properties or
333 sub-controls must be customized as well.
335 \section1 Pseudo-States
337 Selectors may contain \e{pseudo-states} that denote that restrict
338 the application of the rule based on the widget's state.
339 Pseudo-states appear at the end of the selector, with a colon
340 (\c{:}) in between. For example, the following rule applies when
341 the mouse hovers over a QPushButton:
343 \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 8
345 Pseudo-states can be negated using the exclamation operator. For
346 example, the following rule applies when the mouse does not hover
349 \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 9
351 Pseudo-states can be chained, in which case a logical AND is
352 implied. For example, the following rule applies to when the
353 mouse hovers over a checked QCheckBox:
355 \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 10
357 Negated Pseudo-states may appear in Pseudo-state chains. For example,
358 the following rule applies when the mouse hovers over a QPushButton
361 \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 11
363 If needed, logical OR can be expressed using the comma operator:
365 \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 12
367 Pseudo-states can appear in combination with subcontrols. For
370 \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 13
372 See the \l{List of Pseudo-States} section below for the list of
373 pseudo-states provided by Qt widgets.
375 \section1 Conflict Resolution
377 Conflicts arise when several style rules specify the same
378 properties with different values. Consider the following style
381 \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 14
383 Both rules match QPushButton instances called \c okButton and
384 there is a conflict for the \c color property. To resolve this
385 conflict, we must take into account the \e specificity of the
386 selectors. In the above example, \c{QPushButton#okButton} is
387 considered more specific than \c QPushButton, because it
388 (usually) refers to a single object, not to all instances of a
391 Similarly, selectors with pseudo-states are more specific than
392 ones that do not specify pseudo-states. Thus, the following style
393 sheet specifies that a \l{QPushButton} should have white text
394 when the mouse is hovering over it, otherwise red text:
396 \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 15
400 \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 16
402 Here, both selectors have the same specificity, so if the mouse
403 hovers over the button while it is enabled, the second rule takes
404 precedence. If we want the text to be white in that case, we can
405 reorder the rules like this:
407 \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 17
409 Alternatively, we can make the first rule more specific:
411 \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 18
413 A similar issue arises in conjunction with Type Selectors.
414 Consider the following example:
416 \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 19
418 Both rules apply to QPushButton instances (since QPushButton
419 inherits QAbstractButton) and there is a conflict for the
420 \l{Qt Style Sheets Reference#color-prop}{color} property. Because QPushButton
421 inherits QAbstractButton, it might be tempting to assume that
422 \c QPushButton is more specific than \c QAbstractButton. However,
423 for style sheet computations, all Type Selectors have the same
424 specificity, and the rule that appears last takes precedence. In
425 other words, \l{Qt Style Sheets Reference#color-prop}{color} is set to \c gray
426 for all \l{QAbstractButton}s, including \l{QPushButton}s. If we really
427 want \l{QPushButton}s to have red text, we can always reorder the
430 For determining the specificity of a rule, Qt Style Sheets follow
432 \l{http://www.w3.org/TR/REC-CSS2/cascade.html#specificity}{CSS2
436 \e{A selector's specificity is calculated as follows:}
439 \o \e{count the number of ID attributes in the selector (= a)}
440 \o \e{count the number of other attributes and pseudo-classes in the selector (= b)}
441 \o \e{count the number of element names in the selector (= c)}
442 \o \e{ignore pseudo-elements [i.e., \l{subcontrols}].}
445 \e{Concatenating the three numbers a-b-c (in a number system with a
446 large base) gives the specificity.}
450 \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 20
455 Style sheets can be set on the QApplication, on parent widgets,
456 and on child widgets. An arbitrary widget's effective style sheet
457 is obtained by merging the style sheets set on the widget's
458 ancestors (parent, grandparent, etc.), as well as any style sheet
459 set on the QApplication.
461 When conflicts arise, the widget's own style sheet is always
462 preferred to any inherited style sheet, irrespective of the
463 specificity of the conflicting rules. Likewise, the parent
464 widget's style sheet is preferred to the grandparent's, etc.
466 One consequence of this is that setting a style rule on a widget
467 automatically gives it precedence over other rules specified in
468 the ancestor widgets' style sheets or the QApplication style
469 sheet. Consider the following example. First, we set a style
470 sheet on the QApplication:
472 \snippet doc/src/snippets/code/doc_src_stylesheet.cpp 21
474 Then we set a style sheet on a QPushButton object:
476 \snippet doc/src/snippets/code/doc_src_stylesheet.cpp 22
478 The style sheet on the QPushButton forces the QPushButton (and
479 any child widget) to have blue text, in spite of the more
480 specific rule set provided by the application-wide style sheet.
482 The result would have been the same if we had written
484 \snippet doc/src/snippets/code/doc_src_stylesheet.cpp 23
486 except that if the QPushButton had children (which is unlikely),
487 the style sheet would have no impact on them.
489 Style sheet cascading is a complex topic. Refer to the
490 \l{http://www.w3.org/TR/CSS2/cascade.html#cascade}{CSS2
491 Specification} for the gory details. Be aware that Qt currently
492 doesn't implement \c{!important}.
494 \section1 Inheritance
496 In classic CSS, when font and color of an item is not explicitly set,
497 it gets automatically inherited from the parent. When using Qt Style Sheets,
498 a widget does \bold{not} automatically inherit its font and color setting
499 from its parent widget.
501 For example, consider a QPushButton inside a QGroupBox:
503 \snippet doc/src/snippets/code/doc_src_stylesheet.cpp 24
505 The QPushButton does not have an explicit color set. Hence, instead
506 of inheriting color of its parent QGroupBox, it has the system color.
507 If we want to set the color on a QGroupBox and its children,
510 \snippet doc/src/snippets/code/doc_src_stylesheet.cpp 25
512 In contrast, setting a font and propagate using QWidget::setFont() and
513 QWidget::setPalette() propagates to child widgets.
515 \section1 Widgets inside C++ namespaces
517 The Type Selector can be used to style widgets of a particular type. For
520 \snippet doc/src/snippets/code/doc_src_stylesheet.cpp 26
522 Qt Style Sheet uses QObject::className() of the widget to determine
523 when to apply the Type Selector. When custom widgets are inside namespaces,
524 the QObject::className() returns <namespace>::<classname>. This conflicts
525 with the syntax for \l{Sub-Controls}. To overcome this problem,
526 when using the Type Selector for widgets inside namespaces, we must
527 replace the "::" with "--". For example,
529 \snippet doc/src/snippets/code/doc_src_stylesheet.cpp 27
531 \section1 Setting QObject properties
533 From 4.3 and above, any designable Q_PROPERTY
534 can be set using the qproperty-<property name> syntax.
537 \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 28
539 If the property references an enum declared with Q_ENUMS, you should
540 reference its constants by name, i.e., not their numeric value.
545 \page stylesheet-designer.html
546 \contentspage {Qt Style Sheet}{Contents}
547 \previouspage The Style Sheet Syntax
548 \nextpage Customizing Qt Widgets Using Style Sheets
549 \title Qt Designer Integration
551 \l{Qt Designer}{Qt Designer} is an excellent tool
552 to preview style sheets. You can right-click on any widget in Designer
553 and select \gui{Change styleSheet...} to set the style sheet.
555 \image designer-stylesheet-options.png
557 In Qt 4.2 and later, \l{Qt Designer}{Qt Designer} also includes a
558 style sheet syntax highlighter and validator. The validator indicates
559 if the syntax is valid or invalid, at the bottom left of the \gui{Edit
562 \image designer-validator-highlighter.png
564 When you click \gui{OK} or \gui{Apply}, \QD will automatically display
565 the widget with its new stylesheet.
567 \image designer-stylesheet-usage.png
571 \page stylesheet-customizing.html
572 \contentspage {Qt Style Sheet}{Contents}
573 \previouspage Qt Designer Integration
574 \nextpage Qt Style Sheets Reference
575 \title Customizing Qt Widgets Using Style Sheets
577 When using style sheets, every widget is treated as a box with four
578 concentric rectangles: the margin rectangle, the border rectangle, the
579 padding rectangle, and the content rectangle. The box model describes
580 this in further detail.
585 \section1 The Box Model
587 The four concentric rectangles appear conceptually as below:
589 \image stylesheet-boxmodel.png
592 \o The margin falls outside the border.
593 \o The border is drawn between the margin and the padding.
594 \o The padding falls inside the border, between the border and
596 \o The content is what is left from the original widget or
597 subcontrol once we have removed the margin, the border, and
601 The \l{Qt Style Sheets Reference#margin-prop}{margin},
602 \l{Qt Style Sheets Reference#border-width-prop}
604 \l{Qt Style Sheets Reference#padding-prop}{padding}
605 properties all default to zero. In that case, all four rectangles
606 (\c margin, \c border, \c padding, and \c content) coincide exactly.
608 You can specify a background for the widget using the
609 \l{Qt Style Sheets Reference#background-image-prop}{background-image}
610 property. By default, the background-image is drawn only for the area
611 inside the border. This can be changed using the
612 \l{Qt Style Sheets Reference#background-clip-prop}{background-clip}
613 property. You can use
614 \l{Qt Style Sheets Reference#background-repeat-prop}{background-repeat}
616 \l{Qt Style Sheets Reference#background-origin-prop}{background-origin}
617 to control the repetition and origin of the background image.
619 A background-image does not scale with the size of the widget. To provide
620 a "skin" or background that scales along with the widget size, one must
622 \l{Qt Style Sheets Reference#border-image-prop}{border-image}. Since the
623 border-image property provides an alternate background, it is not required
624 to specify a background-image when border-image is specified. In the case,
625 when both of them are specified, the border-image draws over the
628 In addition, the \l{Qt Style Sheets Reference#image-prop}{image} property
629 may be used to draw an image over the border-image. The image specified does
630 not tile or stretch and when its size does not match the size of the widget,
631 its alignment is specified using the
632 \l{Qt Style Sheets Reference#image-position-prop}{image-position}
633 property. Unlike background-image and border-image, one may specify a
634 SVG in the image property, in which case the image is scaled automatically
635 according to the widget size.
637 The steps to render a rule are as follows:
639 \o Set clip for entire rendering operation (border-radius)
640 \o Draw the background (background-image)
641 \o Draw the border (border-image, border)
642 \o Draw overlay image (image)
646 \section1 Sub-controls
648 A widget is considered as a hierarchy (tree) of subcontrols drawn on top
649 of each other. For example, the QComboBox draws the drop-down sub-control
650 followed by the down-arrow sub-control. A QComboBox is thus rendered as
653 \o Render the QComboBox { } rule
654 \o Render the QComboBox::drop-down { } rule
655 \o Render the QComboBox::down-arrow { } rule
658 Sub-controls share a parent-child relationship. In the case of QComboBox,
659 the parent of down-arrow is the drop-down and the parent of drop-down is
660 the widget itself. Sub-controls are positioned within their parent using
661 the \l{Qt Style Sheets Reference#subcontrol-position-prop}
662 {subcontrol-position} and
663 \l{Qt Style Sheets Reference#subcontrol-origin-prop}{subcontrol-origin}
666 Once positioned, sub-controls can be styled using the \l{box model}.
668 \note With complex widgets such as QComboBox and QScrollBar, if one
669 property or sub-control is customized, \bold{all} the other properties or
670 sub-controls must be customized as well.
675 \page stylesheet-reference.html
676 \contentspage {Qt Style Sheet}{Contents}
677 \previouspage Customizing Qt Widgets Using Style Sheets
678 \nextpage Qt Style Sheets Examples
679 \title Qt Style Sheets Reference
681 Qt Style Sheets support various properties, pseudo-states, and
682 subcontrols that make it possible to customize the look of
687 \section1 List of Stylable Widgets
689 The following table lists the Qt widgets that can be customized
698 \o QAbstractScrollArea \target qabstractscrollarea-widget
699 \o Supports the \l{box model}.
701 All derivatives of QAbstractScrollArea, including QTextEdit,
702 and QAbstractItemView (all item view classes), support
703 scrollable backgrounds using
704 \l{Qt Style Sheets Reference#background-attachment-prop}
705 {background-attachment}. Setting the background-attachment to
706 \c{fixed} provides a background-image that does not scroll with the
707 viewport. Setting the background-attachment to \c{scroll}, scrolls
708 the background-image when the scroll bars move.
710 See \l{Qt Style Sheets Examples#Customizing QAbstractScrollArea}
711 {Customizing QAbstractScrollArea} for an example.
714 \o QCheckBox \target qcheckbox-widget
715 \o Supports the \l{box model}. The check indicator can be
716 styled using the \l{#indicator-sub}{::indicator}
717 subcontrol. By default, the indicator is placed in the Top
718 Left corner of the Contents rectangle of the widget.
720 The \l{#spacing-prop}{spacing} property
721 specifies the spacing between the check indicator and
724 See \l{Qt Style Sheets Examples#Customizing QCheckBox}
725 {Customizing QCheckBox} for an example.
728 \o QColumnView \target qcolumnview-widget
729 \o The grip can be styled be using the \l{image-prop}{image} property.
730 The arrow indicators can by styled using the
731 \l{left-arrow-sub}{::left-arrow} subcontrol and the
732 \l{right-arrow-sub}{::right-arrow} subcontrol.
735 \o QComboBox \target qcombobox-widget
736 \o The frame around the combobox can be styled using the
737 \l{box model}. The drop-down button can be styled using
738 the \l{#drop-down-sub}{::drop-down} subcontrol. By default, the
739 drop-down button is placed in the top right corner of the padding
740 rectangle of the widget. The arrow mark inside the drop-down button
741 can be styled using the \l{#down-arrow-sub}{::down-arrow}
742 subcontrol. By default, the arrow is placed in the center of the
743 contents rectangle of the drop-down subcontrol.
745 See \l{Qt Style Sheets Examples#Customizing QComboBox}{Customizing QComboBox}
749 \o QDateEdit \target qdateedit-widget
750 \o See \l{#qspinbox-widget}{QSpinBox}.
753 \o QDateTimeEdit \target qdatetimeedit-widget
754 \o See \l{#qspinbox-widget}{QSpinBox}.
757 \o QDialog \target qdialog-widget
758 \o Supports only the \l{Qt Style Sheets Reference#background-prop}{background},
759 \l{#background-clip-prop}{background-clip} and
760 \l{#background-origin-prop}{background-origin} properties.
762 \warning Make sure you define the Q_OBJECT macro for your custom
766 \o QDialogButtonBox \target qdialogbuttonbox-widget
767 \o The layout of buttons can be altered using the
768 \l{#button-layout-prop}{button-layout} property.
771 \o QDockWidget \target qdockwidget-widget
772 \o Supports styling of the title bar and the title bar buttons when docked.
774 The dock widget border can be styled using the \l{#border-prop}{border}
775 property. The \l{#title-sub}{::title} subcontrol can be used to customize
776 the title bar. The close and float buttons are positioned with respect
777 to the \l{title-sub}{::title} subcontrol using the
778 \l{#close-button-sub}{::close-button} and
779 \l{#float-button-sub}{::float-button} respectively.
781 When the title bar is vertical, the \l{#vertical-ps}{:vertical} pseudo
782 class is set. In addition, depending on QDockWidget::DockWidgetFeature,
783 the \l{#closable-ps}{:closable}, \l{#floatable-ps}{:floatable} and
784 \l{#movable-ps}{:movable} pseudo states are set.
786 \note Use QMainWindow::separator to style the resize handle.
788 \warning The style sheet has no effect when the QDockWidget is undocked
789 as Qt uses native top level windows when undocked.
791 See \l{Qt Style Sheets Examples#Customizing QDockWidget}
792 {Customizing QDockWidget} for an example.
795 \o QDoubleSpinBox \target qdoublespinbox-widget
796 \o See \l{#qspinbox-widget}{QSpinBox}.
799 \o QFrame \target qframe-widget
800 \o Supports the \l{box model}.
802 Since 4.3, setting a stylesheet on a QLabel automatically
803 sets the QFrame::frameStyle property to QFrame::StyledPanel.
805 See \l{Qt Style Sheets Examples#Customizing QFrame}{Customizing QFrame}
809 \o QGroupBox \target qgroupbox-widget
810 \o Supports the \l{box model}. The title can be styled using the
811 \l{#title-sub}{::title} subcontrol. By default, the title is placed
812 depending on QGroupBox::textAlignment.
814 In the case of a checkable QGroupBox, the title includes the
815 check indicator. The indicator is styled using the
816 the \l{#indicator-sub}{::indicator} subcontrol. The
817 \l{#spacing-prop}{spacing} property can be used to control
818 the spacing between the text and indicator.
820 See \l{Qt Style Sheets Examples#Customizing QGroupBox}{Customizing QGroupBox}
824 \o QHeaderView \target qheaderview-widget
825 \o Supports the \l{box model}. The sections of the header view are
826 styled using the \l{#section-sub}{::section} sub control. The
827 \c{section} Sub-control supports the \l{#middle-ps}{:middle},
828 \l{#first-ps}{:first}, \l{#last-ps}{:last},
829 \l{#only-one-ps}{:only-one}, \l{#next-selected-ps}{:next-selected},
830 \l{#previous-selected-ps}{:previous-selected},
831 \l{#selected-ps}{:selected},
832 and \l{#checked-ps}{:checked} pseudo states.
834 Sort indicator in can be styled using the
835 \l{#up-arrow-sub}{::up-arrow} and the
836 \l{#down-arrow-sub}{::down-arrow} Sub-control.
838 See \l{Qt Style Sheets Examples#Customizing QHeaderView}{Customizing QHeaderView}
842 \o QLabel \target qlabel-widget
843 \o Supports the \l{box model}. Does not support the
844 \l{#hover-ps}{:hover} pseudo-state.
846 Since 4.3, setting a stylesheet on a QLabel automatically
847 sets the QFrame::frameStyle property to QFrame::StyledPanel.
849 See \l{Qt Style Sheets Examples#Customizing QFrame}{Customizing QFrame} for an
850 example (a QLabel derives from QFrame).
853 \o QLineEdit \target qlineedit-widget
854 \o Support the \l{box model}.
856 The color and background of the selected item is styled using
857 \l{#selection-color-prop}{selection-color} and
858 \l{#selection-background-color-prop}{selection-background-color}
861 The password character can be styled using the
862 \l{#lineedit-password-character-prop}{lineedit-password-character}
865 See \l{Qt Style Sheets Examples#Customizing QLineEdit}{Customizing QLineEdit}
869 \o QListView \target qlistview-widget
870 \o Supports the \l{box model}. When
871 \l{QAbstractItemView::alternatingRowColors}{alternating row colors}
872 is enabled, the alternating colors can be styled using the
873 \l{#alternate-background-color-prop}{alternate-background-color}
876 The color and background of the selected item is styled using
877 \l{#selection-color-prop}{selection-color} and
878 \l{#selection-background-color-prop}{selection-background-color}
881 The selection behavior is controlled by the
882 \l{#show-decoration-selected-prop}{show-decoration-selected} property.
884 Use the \l{#item-sub}{::item} subcontrol for more fine grained
885 control over the items in the QListView.
887 See \l{qabstractscrollarea-widget}{QAbsractScrollArea} to
888 style scrollable backgrounds.
890 See \l{Qt Style Sheets Examples#Customizing QListView}
891 {Customzing QListView} for an example.
894 \o QListWidget \target qlistwidget-widget
895 \o See \l{#qlistview-widget}{QListView}.
898 \o QMainWindow \target qmainwindow-widget
899 \o Supports styling of the separator
901 The separator in a QMainWindow when using QDockWidget is styled
902 using the \l{#separator-sub}{::separator} subcontrol.
904 See \l{Qt Style Sheets Examples#Customizing QMainWindow}{Customizing QMainWindow}
908 \o QMenu \target qmenu-widget
909 \o Supports the \l{box model}.
911 Individual items are styled using the \l{#item-sub}{::item}
912 subcontrol. In addition to the usually supported pseudo states,
913 \c{item} subcontrol supports the
914 \l{#selected-ps}{:selected}, \l{#default-ps}{:default},
915 \l{#exclusive-ps}{:exclusive} and the
916 \l{#non-exclusive-ps}{non-exclusive} pseudo states.
918 The indicator of checkable menu items is styled using the
919 \l{#indicator-sub}{::indicator} subcontrol.
921 The separator is styled using the \l{#separator-sub}{::separator}
924 For items with a sub menu, the arrow marks are styled using the
925 \l{right-arrow-sub}{right-arrow} and
926 \l{left-arrow-sub}{left-arrow}.
928 The scroller is styled using the \l{#scroller-sub}{::scroller}.
930 The tear-off is styled using the \l{#tearoff-sub}{::tearoff}.
932 See \l{Qt Style Sheets Examples#Customizing QMenu}{Customizing QMenu}
936 \o QMenuBar \target qmenubar-widget
937 \o Supports the \l{box model}. The \l{#spacing-prop}{spacing}
938 property specifies the spacing between menu items.
939 Individual items are styled using the \l{#item-sub}{::item}
942 \warning When running on Qt/Mac, the menu bar is usually embedded into the
943 system-wide menu bar. In this case, the style sheet will have no effect.
945 See \l{Qt Style Sheets Examples#Customizing QMenuBar}{Customizing QMenuBar}
949 \o QMessageBox \target qmessagebox-widget
950 \o The \l{#messagebox-text-interaction-flags-prop}
951 {messagebox-text-interaction-flags} property can be used to alter
952 the interaction with text in the message box.
955 \o QProgressBar \target qprogressbar-widget
956 \o Supports the \l{box model}. The chunks of the progress bar
957 can be styled using the \l{#chunk-sub}{::chunk} subcontrol.
958 The chunk is displayed on the Contents rectangle of the widget.
960 If the progress bar displays text, use the \l{text-align-prop}{text-align}
961 property to position the text.
963 Indeterminate progress bars have the
964 \l{#indeterminate-ps}{:indeterminate} pseudo state set.
966 See \l{Qt Style Sheets Examples#Customizing QProgressBar}{Customizing QProgressBar}
970 \o QPushButton \target qpushbutton-widget
971 \o Supports the \l{box model}. Supports the \l{#default-ps}{:default},
972 \l{#flat-ps}{:flat}, \l{#checked-ps}{:checked} pseudo states.
974 For QPushButton with a menu, the menu indicator is styled
975 using the \l{#menu-indicator-sub}{::menu-indicator}
976 subcontrol. Appearance of checkable push buttons can be
977 customized using the \l{#open-ps}{:open} and
978 \l{#closed-ps}{:closed} pseudo-states.
980 \warning If you only set a background-color on a QPushButton, the background
981 may not appear unless you set the border property to some value. This is
982 because, by default, the QPushButton draws a native border which completely
983 overlaps the background-color. For example,
985 \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 30
987 See \l{Qt Style Sheets Examples#Customizing QPushButton}{Customizing QPushButton}
991 \o QRadioButton \target qradiobutton-widget
992 \o Supports the \l{box model}. The check indicator can be
993 styled using the \l{#indicator-sub}{::indicator}
994 subcontrol. By default, the indicator is placed in the Top
995 Left corner of the Contents rectangle of the widget.
997 The \l{#spacing-prop}{spacing} property
998 specifies the spacing between the check indicator and
1001 See \l{Qt Style Sheets Examples#Customizing QRadioButton}
1002 {Customizing QRadioButton} for an example.
1005 \o QScrollBar \target qscrollbar-widget
1006 \o Supports the \l{box model}. The Contents rectangle of the widget
1007 is considered to be the groove over which the slider moves. The extent
1008 of the QScrollBar (i.e the width or the height depending on the orientation)
1009 is set using the \l{#width-prop}{width} or \l{#height-prop}{height} property
1010 respectively. To determine the orientation, use the
1011 \l{#horizontal-ps}{:horizontal} and the \l{vertical-ps}{:vertical}
1014 The slider can be styled using the \l{#handle-sub}{::handle} subcontrol.
1015 Setting the \l{#min-width-prop}{min-width} or \l{#min-height-prop}{min-height}
1016 provides size contraints for the slider depending on the orientation.
1018 The \l{add-line-sub}{::add-line} subcontrol can be used to style the
1019 button to add a line. By default, the add-line subcontrol is placed in
1020 top right corner of the Border rectangle of the widget. Depending on the
1021 orientation the \l{#right-arrow-sub}{::right-arrow} or
1022 \l{#down-arrow-sub}{::down-arrow}. By default, the arrows are placed in
1023 the center of the Contents rectangle of the add-line subcontrol.
1025 The \l{sub-line-sub}{::sub-line} subcontrol can be used to style the
1026 button to subtract a line. By default, the sub-line subcontrol is placed in
1027 bottom right corner of the Border rectangle of the widget. Depending on the
1028 orientation the \l{#left-arrow-sub}{::left-arrow} or
1029 \l{#up-arrow-sub}{::up-arrow}. By default, the arrows are placed in
1030 the center of the Contents rectangle of the sub-line subcontrol.
1032 The \l{sub-page-sub}{::sub-page} subcontrol can be used to style the
1033 region of the slider that subtracts a page. The \l{add-page-sub}{::add-page}
1034 subcontrol can be used to style the region of the slider that adds a page.
1036 See \l{Qt Style Sheets Examples#Customizing QScrollBar}{Customizing QScrollBar}
1040 \o QSizeGrip \target qsizegrip-widget
1041 \o Supports the \l{#width-prop}{width},
1042 \l{#height-prop}{height}, and \l{#image-prop}{image}
1045 See \l{Qt Style Sheets Examples#Customizing QSizeGrip}{Customizing QSizeGrip}
1049 \o QSlider \target qslider-widget
1050 \o Supports the \l{box model}. For horizontal slides, the
1051 \l{min-width-prop}{min-width} and \l{height-prop}{height}
1052 properties must be provided. For vertical sliders, the
1053 \l{min-height-prop}{min-height} and \l{width-prop}{width}
1054 properties must be provided.
1056 The groove of the slider is styled
1057 using the \l{#groove-sub}{::groove}. The groove is
1058 positioned by default in the Contents rectangle of the widget.
1059 The thumb of the slider is styled using \l{#handle-sub}{::handle}
1060 subcontrol. The subcontrol moves in the Contents rectangle of
1061 the groove subcontrol.
1063 See \l{Qt Style Sheets Examples#Customizing QSlider}{Customizing QSlider}
1067 \o QSpinBox \target qspinbox-widget
1068 \o The frame of the spin box can be styled using the \l{box
1071 The up button and arrow can be styled using the
1072 \l{#up-button-sub}{::up-button} and
1073 \l{#up-arrow-sub}{::up-arrow} subcontrols. By default,
1074 the up-button is placed in the top right corner in the
1075 Padding rectangle of the widget. Without an explicit size,
1076 it occupies half the height of its reference rectangle.
1077 The up-arrow is placed in the center of the Contents
1078 rectangle of the up-button.
1080 The down button and arrow can be styled using the
1081 \l{#down-button-sub}{::down-button} and
1082 \l{#down-arrow-sub}{::down-arrow} subcontrols. By default,
1083 the down-button is placed in the bottom right corner in the
1084 Padding rectangle of the widget. Without an explicit size,
1085 it occupies half the height of its reference rectangle.
1086 The bottom-arrow is placed in the center of the Contents
1087 rectangle of the bottom-button.
1089 See \l{Qt Style Sheets Examples#Customizing QSpinBox}{Customizing QSpinBox}
1093 \o QSplitter \target qsplitter-widget
1094 \o Supports the \l{box model}. The handle of the splitter
1095 is styled using the \l{#handle-sub}{::handle} subcontrol.
1097 See \l{Qt Style Sheets Examples#Customizing QSplitter}{Customizing QSplitter}
1101 \o QStatusBar \target qstatusbar-widget
1102 \o Supports only the \l{Qt Style Sheets Reference#background-prop}
1103 {background} property.
1104 The frame for individual items can be style using the
1105 \l{#item-sub}{::item} subcontrol.
1107 See \l{Qt Style Sheets Examples#Customizing QStatusBar}{Customizing QStatusBar}
1111 \o QTabBar \target qtabbar-widget
1112 \o Individual tabs may be styled using the \l{#tab-sub}{::tab} subcontrol.
1113 Close buttons using the \l{#close-button-sub}{::close-button}
1114 The tabs support the
1115 \l{#only-one-ps}{:only-one}, \l{#first-ps}{:first},
1116 \l{#last-ps}{:last}, \l{#middle-ps}{:middle},
1117 \l{#previous-selected-ps}{:previous--selected},
1118 \l{#next-selected-ps}{:next-selected},
1119 \l{#selected-ps}{:selected} pseudo states.
1121 The \l{#top-ps}{:top}, \l{#left-ps}{:left}, \l{#right-ps}{:right},
1122 \l{#bottom-ps}{:bottom} pseudo states depending on the orientation
1125 Overlapping tabs for the selected state are created by using
1126 negative margins or using the \c{absolute} position scheme.
1128 The tear indicator of the QTabBar is styled using the
1129 \l{#tear-sub}{::tear} subcontrol.
1131 QTabBar used two QToolButtons for its scrollers that can be styled
1132 using the \c{QTabBar QToolButton} selector. To specify the width
1133 of the scroll button use the \l{#scroller-sub}{::scroller}
1136 The alignment of the tabs within the QTabBar is styled
1137 using the \l{#Alignment}{alignment} property. \warning
1139 To change the position of the QTabBar within a QTabWidget, use the
1140 \l{#tab-bar-sub}{tab-bar} subcontrol (and set subcontrol-position).
1142 See \l{Qt Style Sheets Examples#Customizing QTabWidget and QTabBar}{Customizing QTabBar}
1146 \o QTabWidget \target qtabwidget-widget
1147 \o The frame of the tab widget is styled using the
1148 \l{#pane-sub}{::pane} subcontrol. The left and right
1149 corners are styled using the \l{#left-corner-sub}{::left-corner}
1150 and \l{#right-corner-sub}{::right-corner} respectively.
1151 The position of the tab bar is controlled using the
1152 \l{#tab-bar-sub}{::tab-bar} subcontrol.
1154 By default, the subcontrols have positions of a QTabWidget in
1155 the QWindowsStyle. To place the QTabBar in the center, set the
1156 subcontrol-position of the tab-bar subcontrol.
1158 The \l{#top-ps}{:top}, \l{#left-ps}{:left}, \l{#right-ps}{:right},
1159 \l{#bottom-ps}{:bottom} pseudo states depending on the orientation
1162 See \l{Qt Style Sheets Examples#Customizing QTabWidget and QTabBar}
1163 {Customizing QTabWidget} for an example.
1166 \o QTableView \target qtableview-widget
1167 \o Supports the \l{box model}. When
1168 \l{QAbstractItemView::alternatingRowColors}{alternating row colors}
1169 is enabled, the alternating colors can be styled using the
1170 \l{#alternate-background-color-prop}{alternate-background-color}
1173 The color and background of the selected item is styled using
1174 \l{#selection-color-prop}{selection-color} and
1175 \l{#selection-background-color-prop}{selection-background-color}
1178 The corner widget in a QTableView is implemented as a QAbstractButton
1179 and can be styled using the "QTableView QTableCornerButton::section"
1182 \warning If you only set a background-color on a QTableCornerButton,
1183 the background may not appear unless you set the border property to
1184 some value. This is because, by default, the QTableCornerButton draws a
1185 native border which completely overlaps the background-color.
1187 The color of the grid can be specified using the
1188 \l{#gridline-color-prop}{gridline-color} property.
1190 See \l{qabstractscrollarea-widget}{QAbsractScrollArea} to
1191 style scrollable backgrounds.
1193 See \l{Qt Style Sheets Examples#Customizing QTableView}
1194 {Customzing QTableView} for an example.
1197 \o QTableWidget \target qtablewidget-widget
1198 \o See \l{#qtableview-widget}{QTableView}.
1201 \o QTextEdit \target qtextedit-widget
1202 \o Supports the \l{box model}.
1204 The color and background of selected text is styled using
1205 \l{#selection-color-prop}{selection-color} and
1206 \l{#selection-background-color-prop}{selection-background-color}
1209 See \l{qabstractscrollarea-widget}{QAbsractScrollArea} to
1210 style scrollable backgrounds.
1213 \o QTimeEdit \target qtimeedit-widget
1214 \o See \l{#qspinbox-widget}{QSpinBox}.
1217 \o QToolBar \target qtoolbar-widget
1218 \o Supports the \l{box model}.
1220 The \l{#top-ps}{:top}, \l{#left-ps}{:left}, \l{#right-ps}{:right},
1221 \l{#bottom-ps}{:bottom} pseudo states depending on the area in
1222 which the tool bar is grouped.
1224 The \l{#first-ps}{:first}, \l{#last-ps}{:last}, \l{#middle-ps}{:middle},
1225 \l{#only-one-ps}{:only-one} pseudo states indicator the position
1226 of the tool bar within a line group (See
1227 QStyleOptionToolBar::positionWithinLine).
1229 The separator of a QToolBar is styled using the
1230 \l{#separator-sub}{::separator} subcontrol.
1232 The handle (to move the toolbar) is styled using the
1233 \l{#handle-sub}{::handle} subcontrol.
1235 See \l{Qt Style Sheets Examples#Customizing QToolBar}{Customizing QToolBar}
1239 \o QToolButton \target qtoolbutton-widget
1240 \o Supports the \l{box model}.
1242 If the QToolButton has a menu, is
1243 \l{#menu-indicator-sub}{::menu-indicator} subcontrol can be used to
1244 style the indicator. By default, the menu-indicator is positioned
1245 at the bottom right of the Padding rectangle of the widget.
1247 If the QToolButton is in QToolButton::MenuButtonPopup mode,
1248 the \l{#menu-button-sub}{::menu-button} subcontrol is used to draw the
1249 menu button. \l{#menu-arrow-sub}{::menu-arrow} subcontrol is used to
1250 draw the menu arrow inside the menu-button. By default, it is
1251 positioned in the center of the Contents rectangle of the
1252 menu-button subcontrol.
1254 When the QToolButton displays arrows, the \l{#up-arrow-sub}{::up-arrow},
1255 \l{#down-arrow-sub}{::down-arrow}, \l{#left-arrow-sub}{::left-arrow}
1256 and \l{#right-arrow-sub}{::right-arrow} subcontrols are used.
1258 \warning If you only set a background-color on a QToolButton, the background
1259 will not appear unless you set the border property to some value. This is
1260 because, by default, the QToolButton draws a native border which completely
1261 overlaps the background-color. For example,
1263 \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 31
1265 See \l{Qt Style Sheets Examples#Customizing QToolButton}{Customizing QToolButton}
1269 \o QToolBox \target qtoolbox-widget
1270 \o Supports the \l{box model}.
1272 The individual tabs can by styled using the
1273 \l{#tab-sub}{::tab} subcontrol. The tabs support the
1274 \l{#only-one-ps}{:only-one}, \l{#first-ps}{:first},
1275 \l{#last-ps}{:last}, \l{#middle-ps}{:middle},
1276 \l{#previous-selected-ps}{:previous-selected},
1277 \l{#next-selected-ps}{:next-selected},
1278 \l{#selected-ps}{:selected} pseudo states.
1281 \o QToolTip \target qtooltip-widget
1282 \o Supports the \l{box model}. The \l{#opacity-prop}{opacity}
1283 property controls the opacity of the tooltip.
1285 See \l{Qt Style Sheets Examples#Customizing QFrame}{Customizing QFrame}
1286 for an example (a QToolTip is a QFrame).
1289 \o QTreeView \target qtreeview-widget
1290 \o Supports the \l{box model}. When
1291 \l{QAbstractItemView::alternatingRowColors}{alternating row colors}
1292 is enabled, the alternating colors can be styled using the
1293 \l{#alternate-background-color-prop}{alternate-background-color}
1296 The color and background of the selected item is styled using
1297 \l{#selection-color-prop}{selection-color} and
1298 \l{#selection-background-color-prop}{selection-background-color}
1301 The selection behavior is controlled by the
1302 \l{#show-decoration-selected-prop}{show-decoration-selected} property.
1304 The branches of the tree view can be styled using the
1305 \l{#branch-sub}{::branch} subcontrol. The
1306 ::branch Sub-control supports the \l{open-ps}{:open},
1307 \l{closed-ps}{:closed}, \l{has-siblings-ps}{:has-sibling} and
1308 \l{has-children-ps}{:has-children} pseudo states.
1310 Use the \l{#item-sub}{::item} subcontrol for more fine grained
1311 control over the items in the QTreeView.
1313 See \l{qabstractscrollarea-widget}{QAbsractScrollArea} to
1314 style scrollable backgrounds.
1316 See \l{Qt Style Sheets Examples#Customizing QTreeView}{Customizing QTreeView}
1317 for an example to style the branches.
1320 \o QTreeWidget \target qtreewidget-widget
1321 \o See \l{#qtreeview-widget}{QTreeView}.
1324 \o QWidget \target qwidget-widget
1325 \o Supports only the \l{Qt Style Sheets Reference#background-prop}{background},
1326 \l{#background-clip-prop}{background-clip} and
1327 \l{#background-origin-prop}{background-origin} properties.
1329 If you subclass from QWidget, you need to provide a paintEvent for your
1330 custom QWidget as below:
1331 \snippet doc/src/snippets/code/doc_src_stylesheet.cpp 32
1333 The above code is a no-operation if there is no stylesheet set.
1335 \warning Make sure you define the Q_OBJECT macro for your custom
1340 \section1 List of Properties
1342 The table below lists all the properties supported by Qt Style
1343 Sheets. Which values can be given to an property depend on the
1344 \l{List of Property Types}{property's type}. Unless otherwise
1345 specified, properties below apply to all widgets. Properties
1346 marked with an asterisk * are specific to Qt and have no equivalent
1356 \o \bold{\c alternate-background-color} \target alternate-background-color-prop
1357 \o \l{#Brush}{Brush} \BR
1358 \o The \l{QAbstractItemView::alternatingRowColors}
1359 {alternate background color} used in QAbstractItemView subclasses.
1361 If this property is not set, the default value is
1362 whatever is set for the palette's
1363 \l{QPalette::}{AlternateBase} role.
1367 \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 33
1369 See also \l{Qt Style Sheets Reference#background-prop}{background} and
1370 \l{#selection-background-color-prop}{selection-background-color}.
1373 \o \bold{\c background} \target background-prop
1374 \o \l{#Background}{Background}
1375 \o Shorthand notation for setting the background. Equivalent
1376 to specifying \c background-color, \c background-image, \c
1377 background-repeat, and/or \c background-position.
1379 This property is supported by QAbstractItemView
1380 subclasses, QAbstractSpinBox subclasses, QCheckBox,
1381 QComboBox, QDialog, QFrame, QGroupBox, QLabel, QLineEdit,
1382 QMenu, QMenuBar, QPushButton, QRadioButton, QSplitter,
1383 QTextEdit, QToolTip, and plain \l{QWidget}s.
1387 \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 34
1390 Often, it is required to set a fill pattern similar to the styles
1391 in Qt::BrushStyle. You can use the background-color property for
1392 Qt::SolidPattern, Qt::RadialGradientPattern, Qt::LinearGradientPattern
1393 and Qt::ConicalGradientPattern. The other patterns are easily achieved
1394 by creating a background image that contains the pattern.
1398 \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 35
1400 See also \l{#background-origin-prop}{background-origin},
1401 \l{#selection-background-color-prop}{selection-background-color},
1402 \l{#background-clip-prop}{background-clip},
1403 \l{#background-attachment-prop}{background-attachment}
1404 and \l{#alternate-background-color-prop}{alternate-background-color}.
1407 \o \c background-color \target background-color-prop
1408 \o \l{#Brush}{Brush} \BR
1409 \o The background color used for the widget.
1413 \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 36
1416 \o \c background-image \target background-image-prop
1418 \o The background image used for the widget. Semi-transparent
1419 parts of the image let the \c background-color shine
1424 \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 37
1427 \o \c background-repeat \target background-repeat-prop
1428 \o \l{#Repeat}{Repeat}
1429 \o Whether and how the background image is repeated to fill
1430 the \c background-origin rectangle.
1432 If this property is not specified, the background image
1433 is repeated in both directions (\c repeat).
1437 \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 38
1440 \o \c background-position
1441 \o \l{#Alignment}{Alignment}
1442 \o The alignment of the background image within the \c
1443 background-origin rectangle.
1445 If this property is not specified, the alignment is \c
1450 \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 39
1453 \o \bold{\c background-attachment} \target background-attachment-prop
1454 \o \l{#Attachment}{Attachment}
1455 \o Determines whether the background-image in a QAbstractScrollArea
1456 is scrolled or fixed with respect to the viewport.
1457 By default, the background-image scrolls with the viewport.
1461 \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 40
1463 See also \l{Qt Style Sheets Reference#background-prop}{background}
1466 \o \bold{\c background-clip} \target background-clip-prop
1467 \o \l{#Origin}{Origin}
1468 \o The widget's rectangle, in which the \c background is drawn.
1470 This property specifies the rectangle to which the \c background-color
1471 and \c background-image are clipped.
1473 This property is supported by QAbstractItemView
1474 subclasses, QAbstractSpinBox subclasses, QCheckBox,
1475 QComboBox, QDialog, QFrame, QGroupBox, QLabel,
1476 QPushButton, QRadioButton, QSplitter, QTextEdit, QToolTip,
1477 and plain \l{QWidget}s.
1479 If this property is not specified, the default is \c
1484 \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 41
1486 See also \l{Qt Style Sheets Reference#background-prop}{background},
1487 \l{#background-origin-prop}{background-origin} and \l{The Box Model}.
1490 \o \bold{\c background-origin} \target background-origin-prop
1491 \o \l{#Origin}{Origin}
1492 \o The widget's background rectangle, to use in conjunction
1493 with \c background-position and \c background-image.
1495 This property is supported by QAbstractItemView
1496 subclasses, QAbstractSpinBox subclasses, QCheckBox,
1497 QComboBox, QDialog, QFrame, QGroupBox, QLabel,
1498 QPushButton, QRadioButton, QSplitter, QTextEdit, QToolTip,
1499 and plain \l{QWidget}s.
1501 If this property is not specified, the default is \c
1506 \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 42
1508 See also \l{Qt Style Sheets Reference#background-prop}{background} and
1512 \o \bold{\c border} \target border-prop
1513 \o \l{#Border}{Border}
1514 \o Shorthand notation for setting the widget's border. Equivalent
1515 to specifying \c border-color, \c border-style, and/or
1518 This property is supported by QAbstractItemView
1519 subclasses, QAbstractSpinBox subclasses, QCheckBox,
1520 QComboBox, QFrame, QGroupBox, QLabel, QLineEdit,
1521 QMenu, QMenuBar, QPushButton, QRadioButton, QSplitter,
1522 QTextEdit, QToolTip, and plain \l{QWidget}s.
1526 \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 43
1530 \o \l{#Border}{Border}
1531 \o Shorthand notation for setting the widget's top border.
1532 Equivalent to specifying \c border-top-color, \c
1533 border-top-style, and/or \c border-top-width.
1537 \o \l{#Border}{Border}
1538 \o Shorthand notation for setting the widget's right border.
1539 Equivalent to specifying \c border-right-color, \c
1540 border-right-style, and/or \c border-right-width.
1544 \o \l{#Border}{Border}
1545 \o Shorthand notation for setting the widget's bottom border.
1546 Equivalent to specifying \c border-bottom-color, \c
1547 border-bottom-style, and/or \c border-bottom-width.
1551 \o \l{#Border}{Border}
1552 \o Shorthand notation for setting the widget's left border.
1553 Equivalent to specifying \c border-left-color, \c
1554 border-left-style, and/or \c border-left-width.
1557 \o \bold{\c border-color} \target border-attrs
1558 \target border-color-prop
1559 \o \l{#Box Colors}{Box Colors}
1560 \o The color of all the border's edges. Equivalent to
1561 specifying \c border-top-color, \c border-right-color, \c
1562 border-bottom-color, and \c border-left-color.
1564 This property is supported by QAbstractItemView
1565 subclasses, QAbstractSpinBox subclasses, QCheckBox,
1566 QComboBox, QFrame, QGroupBox, QLabel, QLineEdit,
1567 QMenu, QMenuBar, QPushButton, QRadioButton, QSplitter,
1568 QTextEdit, QToolTip, and plain \l{QWidget}s.
1570 If this property is not specified, it defaults to
1571 \l{#color-prop}{color} (i.e., the widget's foreground
1576 \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 44
1578 See also \l{Qt Style Sheets Reference#border-style-prop}{border-style},
1579 \l{Qt Style Sheets Reference#border-width-prop}{border-width},
1580 \l{#border-image-prop}{border-image}, and \l{The Box Model}.
1583 \o \c border-top-color
1584 \o \l{#Brush}{Brush} \BR
1585 \o The color of the border's top edge.
1588 \o \c border-right-color
1589 \o \l{#Brush}{Brush} \BR
1590 \o The color of the border's right edge.
1593 \o \c border-bottom-color
1594 \o \l{#Brush}{Brush} \BR
1595 \o The color of the border's bottom edge.
1598 \o \c border-left-color
1599 \o \l{#Brush}{Brush} \BR
1600 \o The color of the border's left edge.
1603 \o \bold{\c border-image} \target border-image-prop
1604 \o \l{#Border Image}{Border Image}
1605 \o The image used to fill the border. The image is cut into
1606 nine parts and stretched appropriately if necessary. See
1607 \l{#Border Image}{Border Image} for details.
1609 This property is supported by QAbstractItemView
1610 subclasses, QAbstractSpinBox subclasses, QCheckBox,
1611 QComboBox, QFrame, QGroupBox, QLabel, QLineEdit,
1612 QMenu, QMenuBar, QPushButton, QRadioButton, QSplitter,
1613 QTextEdit and QToolTip.
1615 See also \l{#border-color-prop}{border-color},
1616 \l{Qt Style Sheets Reference#border-style-prop}{border-style},
1617 \l{Qt Style Sheets Reference#border-width-prop}{border-width}, and
1621 \o \bold{\c border-radius} \target border-radius-prop
1622 \o \l{#Radius}{Radius}
1623 \o The radius of the border's corners. Equivalent to
1624 specifying \c border-top-left-radius, \c
1625 border-top-right-radius, \c border-bottom-right-radius,
1626 and \c border-bottom-left-radius.
1628 The border-radius clips the element's
1629 \l{Qt Style Sheets Reference#background-prop}{background}.
1631 This property is supported by QAbstractItemView
1632 subclasses, QAbstractSpinBox subclasses, QCheckBox,
1633 QComboBox, QFrame, QGroupBox, QLabel, QLineEdit, QMenu,
1634 QMenuBar, QPushButton, QRadioButton, QSplitter, QTextEdit,
1637 If this property is not specified, it defaults to 0.
1641 \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 45
1643 See also \l{Qt Style Sheets Reference#border-width-prop}{border-width} and
1647 \o \c border-top-left-radius
1648 \o \l{#Radius}{Radius}
1649 \o The radius of the border's top-left corner.
1652 \o \c border-top-right-radius
1653 \o \l{#Radius}{Radius}
1654 \o The radius of the border's top-right corner.
1657 \o \c border-bottom-right-radius
1658 \o \l{#Radius}{Radius}
1659 \o The radius of the border's bottom-right corner. Setting
1660 this property to a positive value results in a rounded
1664 \o \c border-bottom-left-radius
1665 \o \l{#Radius}{Radius}
1666 \o The radius of the border's bottom-left corner. Setting this
1667 property to a positive value results in a rounded corner.
1670 \o \bold{\c border-style} \target border-style-prop
1671 \o \l {Border Style}
1672 \o The style of all the border's edges.
1674 This property is supported by QAbstractItemView
1675 subclasses, QAbstractSpinBox subclasses, QCheckBox,
1676 QComboBox, QFrame, QGroupBox, QLabel, QLineEdit, QMenu,
1677 QMenuBar, QPushButton, QRadioButton, QSplitter, QTextEdit,
1680 If this property is not specified, it defaults to \c none.
1684 \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 46
1686 See also \l{#border-color-prop}{border-color},
1687 \l{Qt Style Sheets Reference#border-style-prop}{border-style},
1688 \l{#border-image-prop}{border-image}, and \l{The Box Model}.
1691 \o \c border-top-style
1692 \o \l{#Border Style}{Border Style}
1693 \o The style of the border's top edge.
1696 \o \c border-right-style
1697 \o \l{#Border Style}{Border Style}
1698 \o The style of the border's right edge/
1701 \o \c border-bottom-style
1702 \o \l{#Border Style}{Border Style}
1703 \o The style of the border's bottom edge.
1706 \o \c border-left-style
1707 \o \l{#Border Style}{Border Style}
1708 \o The style of the border's left edge.
1711 \o \bold{\c border-width} \target border-width-prop
1712 \o \l{#Box Lengths}{Box Lengths}
1713 \o The width of the border. Equivalent to setting \c
1714 border-top-width, \c border-right-width, \c
1715 border-bottom-width, and \c border-left-width.
1717 This property is supported by QAbstractItemView
1718 subclasses, QAbstractSpinBox subclasses, QCheckBox,
1719 QComboBox, QFrame, QGroupBox, QLabel, QLineEdit, QMenu,
1720 QMenuBar, QPushButton, QRadioButton, QSplitter, QTextEdit,
1725 \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 47
1727 See also \l{#border-color-prop}{border-color},
1728 \l{#border-radius-prop}{border-radius},
1729 \l{Qt Style Sheets Reference#border-style-prop}{border-style},
1730 \l{#border-image-prop}{border-image}, and
1734 \o \c border-top-width
1735 \o \l{#Length}{Length}
1736 \o The width of the border's top edge.
1739 \o \c border-right-width
1740 \o \l{#Length}{Length}
1741 \o The width of the border's right edge.
1744 \o \c border-bottom-width
1745 \o \l{#Length}{Length}
1746 \o The width of the border's bottom edge.
1749 \o \c border-left-width
1750 \o \l{#Length}{Length}
1751 \o The width of the border's left edge.
1754 \o \bold{\c bottom} \target bottom-prop
1755 \o \l{#Length}{Length}
1756 \o If \l{#position-prop}{position} is \c relative (the
1757 default), moves a \l{subcontrol} by a certain offset up;
1758 specifying \tt{bottom: \e{y}} is then equivalent to
1759 specifying \tt{\l{Qt Style Sheets Reference#top-prop}{top}: -\e{y}}.
1761 If \l{#position-prop}{position} is \c absolute, the \c
1762 bottom property specifies the subcontrol's bottom edge
1763 in relation to the parent's bottom edge (see also
1764 \l{Qt Style Sheets Reference#subcontrol-origin-prop}
1765 {subcontrol-origin}).
1769 \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 48
1771 See also \l{Qt Style Sheets Reference#left-prop}{left}, \l{#right-prop}{right}, and
1772 \l{Qt Style Sheets Reference#top-prop}{top}.
1775 \o \bold{\c button-layout} \target button-layout-prop
1776 \o \l{#Number}{Number}
1777 \o The layout of buttons in a QDialogButtonBox or
1778 a QMessageBox. The possible values are 0
1779 (\l{QDialogButtonBox::}{WinLayout}), 1
1780 (\l{QDialogButtonBox::}{MacLayout}), 2
1781 (\l{QDialogButtonBox::}{KdeLayout}), and 3
1782 (\l{QDialogButtonBox::}{GnomeLayout}).
1784 If this property is not specified, it defaults to the
1785 value specified by the current style for the
1786 \l{QStyle::}{SH_DialogButtonLayout} style hint.
1790 \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 49
1793 \o \bold{\c color} \target color-prop
1794 \o \l{#Brush}{Brush} \BR
1795 \o The color used to render text.
1797 This property is supported by all widgets that respect
1798 the \l QWidget::palette.
1800 If this property is not set, the default is whatever is
1801 set for in the widget's palette for the
1802 QWidget::foregroundRole (typically black).
1806 \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 50
1808 See also \l{Qt Style Sheets Reference#background-prop}{background} and
1809 \l{#selection-color-prop}{selection-color}.
1812 \o \bold{\c dialogbuttonbox-buttons-have-icons}
1813 \o \l{#Boolean}{Boolean}
1814 \o Whether the buttons in a QDialogButtonBox show icons
1816 If this property is set to 1, the buttons of a QDialogButtonBox
1817 show icons; if it is set to 0, the icons are not shown.
1819 See the \l{Qt Style Sheets Reference#list of icons}{List of Icons}
1820 section for information on how to set icons.
1822 \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 51
1824 \note Styles defining this property must be applied before the
1825 QDialogButtonBox is created; this means that you must apply the
1826 style to the parent widget or to the application itself.
1830 \o \bold{\c etch-disabled-text}*
1831 \o \l{#Boolean}{Boolean}
1832 \o Whether disabled text is drawn etched.
1834 If this property is not specified, it defaults to the
1835 value specified by the current style for the
1836 \l{QStyle::}{SH_EtchDisabledText} style hint.
1840 \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 52
1844 \o \bold{\c font} \target font-prop
1846 \o Shorthand notation for setting the text's font. Equivalent
1847 to specifying \c font-family, \c font-size, \c font-style,
1848 and/or \c font-weight.
1850 This property is supported by all widgets that respect
1851 the \l QWidget::font.
1853 If this property is not set, the default is the
1858 \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 53
1867 \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 54
1871 \o \l{#Font Size}{Font Size}
1872 \o The font size. In this version of Qt, only pt and px metrics are
1877 \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 55
1886 \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 56
1890 \o \l{#Font Weight}{Font Weight}
1891 \o The weight of the font.
1894 \o \bold{\c gridline-color}* \target gridline-color-prop
1895 \o \l{#Color}{Color} \BR
1896 \o The color of the grid line in a QTableView.
1898 If this property is not specified, it defaults to the
1899 value specified by the current style for the
1900 \l{QStyle::}{SH_Table_GridLineColor} style hint.
1904 \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 57
1907 \o \bold{\c height} \target height-prop
1908 \o \l{#Length}{Length}
1909 \o The height of a \l{subcontrol} (or in some case, a widget).
1911 If this property is not specified, it defaults to a value
1912 that depends on the subcontrol/widget and on the current style.
1914 \warning Unless otherwise specified, this property has no effect
1915 when set on widgets. If you want a widget with a fixed height, set
1916 the \l{#min-width-prop}{min-height} and
1917 \l{#max-width-prop}{max-height} to the same value.
1921 \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 58
1923 See also \l{#width-prop}{width}.
1926 \o \bold{\c icon-size} \target icon-size-prop
1927 \o \l{#Length}{Length}
1928 \o The width and height of the icon in a widget.
1930 The icon size of the following widgets can be set using this
1944 \o \bold{\c image}* \target image-prop
1946 \o The image that is drawn in the contents rectangle of a
1949 The image property accepts a list of \l{#Url}{Url}s or
1950 an \c{svg}. The actual image that is drawn is determined
1951 using the same algorithm as QIcon (i.e) the image is never scaled
1952 up but always scaled down if necessary. If a \c{svg} is specified,
1953 the image is scaled to the size of the contents rectangle.
1955 Setting the image property on sub controls implicitly sets the
1956 width and height of the sub-control (unless the image in a SVG).
1958 In Qt 4.3 and later, the alignment of the
1959 image within the rectangle can be specified using
1960 \l{image-position-prop}{image-position}.
1962 This property is for \l{subcontrol}s only--we don't support it for
1965 \warning The QIcon SVG plugin is needed to render SVG images.
1969 \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 59
1972 \o \bold{\c image-position} \target image-position-prop
1973 \o \l{#Alignment}{alignment}
1974 \o In Qt 4.3 and later, the alignment of the image image's position can be specified
1975 using relative or absolute position.
1978 \o \bold{\c left} \target left-prop
1979 \o \l{#Length}{Length}
1980 \o If \l{#position-prop}{position} is \c relative (the
1981 default), moves a \l{subcontrol} by a certain offset to
1984 If \l{#position-prop}{position} is \c absolute, the \c
1985 left property specifies the subcontrol's left edge in
1986 relation to the parent's left edge (see also
1987 \l{Qt Style Sheets Reference#subcontrol-origin-prop}{subcontrol-origin}).
1989 If this property is not specified, it defaults to \c 0.
1993 \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 60
1995 See also \l{#right-prop}{right}, \l{Qt Style Sheets Reference#top-prop}{top}, and
1996 \l{#bottom-prop}{bottom}.
1999 \o \bold{\c lineedit-password-character*} \target lineedit-password-character-prop
2000 \o \l{#Number}{Number}
2001 \o The QLineEdit password character as a Unicode number.
2003 If this property is not specified, it defaults to the
2004 value specified by the current style for the
2005 \l{QStyle::}{SH_LineEdit_PasswordCharacter} style hint.
2009 \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 61
2012 \o \bold{\c margin} \target margin-prop
2014 \o The widget's margins. Equivalent to specifying \c
2015 margin-top, \c margin-right, \c margin-bottom, and \c
2018 This property is supported by QAbstractItemView
2019 subclasses, QAbstractSpinBox subclasses, QCheckBox,
2020 QComboBox, QFrame, QGroupBox, QLabel, QLineEdit, QMenu,
2021 QMenuBar, QPushButton, QRadioButton, QSplitter, QTextEdit,
2024 If this property is not specified, it defaults to \c 0.
2028 \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 62
2030 See also \l{Qt Style Sheets Reference#padding-prop}{padding},
2031 \l{#spacing-prop}{spacing}, and \l{The Box Model}.
2035 \o \l{#Length}{Length}
2036 \o The widget's top margin.
2040 \o \l{#Length}{Length}
2041 \o The widget's right margin.
2045 \o \l{#Length}{Length}
2046 \o The widget's bottom margin.
2050 \o \l{#Length}{Length}
2051 \o The widget's left margin.
2054 \o \bold{\c max-height} \target max-height-prop
2055 \o \l{#Length}{Length}
2056 \o The widget's or a subcontrol's maximum height.
2058 This property is supported by QAbstractItemView
2059 subclasses, QAbstractSpinBox subclasses, QCheckBox,
2060 QComboBox, QFrame, QGroupBox, QLabel, QLineEdit, QMenu,
2061 QMenuBar, QPushButton, QRadioButton, QSizeGrip, QSpinBox,
2062 QSplitter, QStatusBar, QTextEdit, and QToolTip.
2064 The value is relative to the contents rect in the \l{The
2065 Box Model}{box model}.
2069 \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 63
2071 See also \l{#max-width-prop}{max-width}.
2074 \o \bold{\c max-width} \target max-width-prop
2075 \o \l{#Length}{Length}
2076 \o The widget's or a subcontrol's maximum width.
2078 This property is supported by QAbstractItemView
2079 subclasses, QAbstractSpinBox subclasses, QCheckBox,
2080 QComboBox, QFrame, QGroupBox, QLabel, QLineEdit, QMenu,
2081 QMenuBar, QPushButton, QRadioButton, QSizeGrip, QSpinBox,
2082 QSplitter, QStatusBar, QTextEdit, and QToolTip.
2084 The value is relative to the contents rect in the \l{The
2085 Box Model}{box model}.
2089 \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 64
2091 See also \l{#max-height-prop}{max-height}.
2095 \o \bold{\c messagebox-text-interaction-flags*} \target messagebox-text-interaction-flags-prop
2096 \o \l{#Number}{Number}
2097 \o The interaction behavior for text in a message box.
2098 Possible values are based on Qt::TextInteractionFlags.
2100 If this property is not specified, it defaults to the
2101 value specified by the current style for the
2102 \l{QStyle::}{SH_MessageBox_TextInteractionFlags} style
2107 \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 65
2110 \o \bold{\c min-height} \target min-height-prop
2111 \o \l{#Length}{Length}
2112 \o The widget's or a subcontrol's minimum height.
2114 This property is supported by QAbstractItemView
2115 subclasses, QAbstractSpinBox subclasses, QCheckBox,
2116 QComboBox, QFrame, QGroupBox, QLabel, QLineEdit, QMenu,
2117 QMenuBar, QPushButton, QRadioButton, QSizeGrip, QSpinBox,
2118 QSplitter, QStatusBar, QTextEdit, and QToolTip.
2120 If this property is not specified, the minimum height is
2121 derived based on the widget's contents and the style.
2123 The value is relative to the contents rect in the \l{The
2124 Box Model}{box model}.
2128 \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 66
2130 See also \l{#min-width-prop}{min-width}.
2133 \o \bold{\c min-width} \target min-width-prop
2134 \o \l{#Length}{Length}
2135 \o The widget's or a subcontrol's minimum width.
2137 This property is supported by QAbstractItemView
2138 subclasses, QAbstractSpinBox subclasses, QCheckBox,
2139 QComboBox, QFrame, QGroupBox, QLabel, QLineEdit, QMenu,
2140 QMenuBar, QPushButton, QRadioButton, QSizeGrip, QSpinBox,
2141 QSplitter, QStatusBar, QTextEdit, and QToolTip.
2143 If this property is not specified, the minimum width is
2144 derived based on the widget's contents and the style.
2146 The value is relative to the contents rect in the \l{The
2147 Box Model}{box model}.
2151 \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 67
2153 See also \l{#min-height-prop}{min-height}.
2156 \o \bold{\c opacity*} \target opacity-prop
2157 \o \l{#Number}{Number}
2158 \o The opacity for a widget. Possible values are from 0
2159 (transparent) to 255 (opaque). For the moment, this is
2160 only supported for \l{QToolTip}{tooltips}.
2162 If this property is not specified, it defaults to the
2163 value specified by the current style for the
2164 \l{QStyle::}{SH_ToolTipLabel_Opacity} style hint.
2168 \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 68
2171 \o \bold{\c padding} \target padding-prop
2172 \o \l{#Box Lengths}{Box Lengths}
2173 \o The widget's padding. Equivalent to specifying \c
2174 padding-top, \c padding-right, \c padding-bottom, and \c
2177 This property is supported by QAbstractItemView
2178 subclasses, QAbstractSpinBox subclasses, QCheckBox,
2179 QComboBox, QFrame, QGroupBox, QLabel, QLineEdit, QMenu,
2180 QMenuBar, QPushButton, QRadioButton, QSplitter, QTextEdit,
2183 If this property is not specified, it defaults to \c 0.
2187 \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 69
2189 See also \l{#margin-prop}{margin},
2190 \l{#spacing-prop}{spacing}, and \l{The Box Model}.
2194 \o \l{#Length}{Length}
2195 \o The widget's top padding.
2199 \o \l{#Length}{Length}
2200 \o The widget's right padding.
2203 \o \c padding-bottom
2204 \o \l{#Length}{Length}
2205 \o The widget's bottom padding.
2209 \o \l{#Length}{Length}
2210 \o The widget's left padding.
2213 \o \bold{\c paint-alternating-row-colors-for-empty-area}
2214 \target paint-alternating-row-colors-for-empty-area-prop
2216 \o Whether the QTreeView paints alternating row colors for the empty
2217 area (i.e the area where there are no items)
2220 \o \bold{\c position} \target position-prop
2223 \o Whether offsets specified using \l{Qt Style Sheets Reference#left-prop}{left},
2224 \l{#right-prop}{right}, \l{Qt Style Sheets Reference#top-prop}{top}, and
2225 \l{#bottom-prop}{bottom} are relative or absolute
2228 If this property is not specified, it defaults to \c
2232 \o \bold{\c right} \target right-prop
2233 \o \l{#Length}{Length}
2234 \o If \l{#position-prop}{position} is \c relative (the
2235 default), moves a \l{subcontrol} by a certain offset to
2236 the left; specifying \tt{right: \e{x}} is then equivalent
2237 to specifying \tt{\l{Qt Style Sheets Reference#left-prop}{left}: -\e{x}}.
2239 If \l{#position-prop}{position} is \c absolute, the \c
2240 right property specifies the subcontrol's right edge in
2241 relation to the parent's right edge (see also
2242 \l{Qt Style Sheets Reference#subcontrol-origin-prop}{subcontrol-origin}).
2246 \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 70
2248 See also \l{Qt Style Sheets Reference#left-prop}{left}, \l{Qt Style Sheets Reference#top-prop}{top}, and
2249 \l{#bottom-prop}{bottom}.
2252 \o \bold{\c selection-background-color*} \target selection-background-color-prop
2253 \o \l{#Brush}{Brush} \BR
2254 \o The background of selected text or items.
2256 This property is supported by all widgets that respect
2257 the \l QWidget::palette and that show selection text.
2259 If this property is not set, the default value is
2260 whatever is set for the palette's
2261 \l{QPalette::}{Highlight} role.
2265 \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 71
2267 See also \l{#selection-color-prop}{selection-color} and
2268 \l{Qt Style Sheets Reference#background-prop}{background}.
2271 \o \bold{\c selection-color*} \target selection-color-prop
2272 \o \l{#Brush}{Brush} \BR
2273 \o The foreground of selected text or items.
2275 This property is supported by all widgets that respect
2276 the \l QWidget::palette and that show selection text.
2278 If this property is not set, the default value is
2279 whatever is set for the palette's
2280 \l{QPalette::}{HighlightedText} role.
2284 \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 72
2287 \l{#selection-background-color-prop}{selection-background-color}
2288 and \l{#color-prop}{color}.
2291 \o \bold{\c show-decoration-selected*} \target show-decoration-selected-prop
2292 \o \l{#Boolean}{Boolean}
2293 \o Controls whether selections in a QListView cover the
2294 entire row or just the extent of the text.
2296 If this property is not specified, it defaults to the
2297 value specified by the current style for the
2298 \l{QStyle::}{SH_ItemView_ShowDecorationSelected} style
2303 \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 73
2306 \o \bold{\c spacing*} \target spacing-prop
2307 \o \l{#Length}{Length}
2308 \o Internal spacing in the widget.
2310 This property is supported by QCheckBox, checkable
2311 \l{QGroupBox}es, QMenuBar, and QRadioButton.
2313 If this property is not specified, the default value
2314 depends on the widget and on the current style.
2318 \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 74
2320 See also \l{Qt Style Sheets Reference#padding-prop}{padding} and
2321 \l{#margin-prop}{margin}.
2324 \o \bold{\c subcontrol-origin*} \target subcontrol-origin-prop
2325 \o \l{#Origin}{Origin}
2326 \o The origin rectangle of the \l subcontrol within the
2329 If this property is not specified, the default is \c
2334 \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 75
2337 \l{Qt Style Sheets Reference#subcontrol-position-prop}{subcontrol-position}.
2340 \o \bold{\c subcontrol-position*} \target subcontrol-position-prop
2341 \o \l{#Alignment}{Alignment}
2342 \o The alignment of the \l subcontrol within the origin
2343 rectangle specified by \l{Qt Style Sheets Reference#subcontrol-origin-prop}
2344 {subcontrol-origin}.
2346 If this property is not specified, it defaults to a value
2347 that depends on the subcontrol.
2351 \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 76
2354 \l{Qt Style Sheets Reference#subcontrol-origin-prop}{subcontrol-origin}.
2357 \o \bold{\c text-align} \target text-align-prop
2358 \o \l{#Alignment}{Alignment}
2359 \o The alignment of text and icon within the contents of the widget.
2361 If this value is not specified, it defaults to the value
2362 that depends on the native style.
2366 \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 77
2368 This property is currently supported only by QPushButton
2372 \o \bold{\c text-decoration}
2377 \o Additional text effects
2380 \o \bold{\c top} \target top-prop
2381 \o \l{#Length}{Length}
2382 \o If \l{#position-prop}{position} is \c relative (the
2383 default), moves a \l{subcontrol} by a certain offset
2386 If \l{#position-prop}{position} is \c absolute, the \c top
2387 property specifies the subcontrol's top edge in relation
2388 to the parent's top edge (see also
2389 \l{Qt Style Sheets Reference#subcontrol-origin-prop}{subcontrol-origin}).
2391 If this property is not specified, it defaults to \c 0.
2395 \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 78
2397 See also \l{Qt Style Sheets Reference#left-prop}{left}, \l{#right-prop}{right}, and
2398 \l{#bottom-prop}{bottom}.
2401 \o \bold{\c width} \target width-prop
2402 \o \l{#Length}{Length}
2403 \o The width of a \l{subcontrol} (or a widget in some cases).
2405 If this property is not specified, it defaults to a value
2406 that depends on the subcontrol/widget and on the current style.
2408 \warning Unless otherwise specified, this property has no effect
2409 when set on widgets. If you want a widget with a fixed width, set
2410 the \l{#min-width-prop}{min-width} and
2411 \l{#max-width-prop}{max-width} to the same value.
2415 \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 79
2417 See also \l{#height-prop}{height}.
2421 \target list of icons
2422 \section1 List of Icons
2424 Icons used in Qt can be customized using the following properties. Each of
2425 the properties listed in this section have the type \l{#Icon}{Icon}.
2427 Note that for icons to appear in buttons in a QDialogButtonBox, you need to
2428 set the dialogbuttonbox-buttons-have-icons property to true. Also, to
2429 customize the size of the icons, use the icon-size property.
2434 \o QStyle::StandardPixmap
2438 \o QStyle::SP_ArrowBack
2442 \o QStyle::SP_DriveCDIcon
2446 \o QStyle::SP_ComputerIcon
2450 \o QStyle::SP_DesktopIcon
2453 \o dialog-apply-icon
2454 \o QStyle::SP_DialogApplyButton
2457 \o dialog-cancel-icon
2458 \o QStyle::SP_DialogCancelButton
2461 \o dialog-close-icon
2462 \o QStyle::SP_DialogCloseButton
2465 \o dialog-discard-icon
2466 \o QStyle::SP_DialogDiscardButton
2470 \o QStyle::SP_DialogHelpButton
2474 \o QStyle::SP_DialogNoButton
2478 \o QStyle::SP_DialogOkButton
2482 \o QStyle::SP_DialogOpenButton
2485 \o dialog-reset-icon
2486 \o QStyle::SP_DialogResetButton
2490 \o QStyle::SP_DialogSaveButton
2494 \o QStyle::SP_DialogYesButton
2497 \o directory-closed-icon
2498 \o QStyle::SP_DirClosedIcon
2502 \o QStyle::SP_DirIcon
2505 \o directory-link-icon
2506 \o QStyle::SP_DirLinkIcon
2509 \o directory-open-icon
2510 \o QStyle::SP_DirOpenIcon
2513 \o dockwidget-close-icon
2514 \o QStyle::SP_DockWidgetCloseButton
2518 \o QStyle::SP_ArrowDown
2522 \o QStyle::SP_DriveDVDIcon
2526 \o QStyle::SP_FileIcon
2530 \o QStyle::SP_FileLinkIcon
2534 \o filedialog-backward-icon
2535 \o QStyle::SP_FileDialogBack
2539 \o filedialog-contentsview-icon
2540 \o QStyle::SP_FileDialogContentsView
2543 \o filedialog-detailedview-icon
2544 \o QStyle::SP_FileDialogDetailedView
2547 \o filedialog-end-icon
2548 \o QStyle::SP_FileDialogEnd
2551 \o filedialog-infoview-icon
2552 \o QStyle::SP_FileDialogInfoView
2555 \o filedialog-listview-icon
2556 \o QStyle::SP_FileDialogListView
2559 \o filedialog-new-directory-icon
2560 \o QStyle::SP_FileDialogNewFolder
2563 \o filedialog-parent-directory-icon
2564 \o QStyle::SP_FileDialogToParent
2567 \o filedialog-start-icon
2568 \o QStyle::SP_FileDialogStart
2572 \o QStyle::SP_DriveFDIcon
2576 \o QStyle::SP_ArrowForward
2580 \o QStyle::SP_DriveHDIcon
2584 \o QStyle::SP_DirHomeIcon
2588 \o QStyle::SP_ArrowLeft
2591 \o messagebox-critical-icon
2592 \o QStyle::SP_MessageBoxCritical
2595 \o messagebox-information-icon
2596 \o QStyle::SP_MessageBoxInformation
2599 \o messagebox-question-icon
2600 \o QStyle::SP_MessageBoxQuestion
2603 \o messagebox-warning-icon
2604 \o QStyle::SP_MessageBoxWarning
2608 \o QStyle::SP_DriveNetIcon
2612 \o QStyle::SP_ArrowRight
2615 \o titlebar-contexthelp-icon
2616 \o QStyle::SP_TitleBarContextHelpButton
2619 \o titlebar-maximize-icon
2620 \o QStyle::SP_TitleBarMaxButton
2623 \o titlebar-menu-icon
2624 \o QStyle::SP_TitleBarMenuButton
2627 \o titlebar-minimize-icon
2628 \o QStyle::SP_TitleBarMinButton
2631 \o titlebar-normal-icon
2632 \o QStyle::SP_TitleBarNormalButton
2635 \o titlebar-shade-icon
2636 \o QStyle::SP_TitleBarShadeButton
2639 \o titlebar-unshade-icon
2640 \o QStyle::SP_TitleBarUnshadeButton
2644 \o QStyle::SP_TrashIcon
2648 \o QStyle::SP_ArrowUp
2652 \section1 List of Property Types
2654 The following table summarizes the syntax and meaning of the
2655 different property types.
2664 \o \bold Alignment \target Alignment
2670 \o Horizontal and/or vertical alignment.
2674 \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 80
2677 \o \bold Attachment \target Attachment
2680 \o Scroll or fixed attachment.
2683 \o \bold Background \target Background
2684 \o \{ \l{#Brush}{Brush} \BR
2686 | \l{#Repeat}{Repeat} \BR
2687 | \l{#Alignment}{Alignment} \}*
2688 \o A sequence of \l{#Brush}{Brush}, \l{#Url}{Url},
2689 \l{#Repeat}{Repeat}, and \l{#Alignment}{Alignment}.
2692 \o \bold Boolean \target Boolean
2694 \o True (\c 1) or false (\c 0).
2698 \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 81
2701 \o \bold Border \target Border
2702 \o \{ \l{#Border Style}{Border Style} \BR
2703 | \l{#Length}{Length} \BR
2704 | \l{#Brush}{Brush} \}*
2705 \o Shorthand border property.
2708 \o \bold{Border Image} \target Border Image
2710 | \l{Url} \l{Number}\{4\} \BR (\c stretch | \c repeat){0,2}
2711 \o A border image is an image that is composed of nine parts
2712 (top left, top center, top right, center left, center,
2713 center right, bottom left, bottom center, and bottom
2714 right). When a border of a certain size is required, the
2715 corner parts are used as is, and the top, right, bottom,
2716 and left parts are stretched or repeated to produce a
2717 border with the desired size.
2720 \l{http://www.w3.org/TR/css3-background/#the-border-image}
2721 {CSS3 Draft Specification} for details.
2724 \o \bold{Border Style} \target Border Style
2727 | \c dot-dot-dash \BR
2736 \o Specifies the pattern used to draw a border.
2737 See the \l{http://www.w3.org/TR/css3-background/#border-style}
2738 {CSS3 Draft Specification} for details.
2741 \o \bold{Box Colors} \target Box Colors
2742 \o \l{#Brush}{Brush}\{1,4\}
2743 \o One to four occurrences of \l{#Brush}{Brush}, specifying the top,
2744 right, bottom, and left edges of a box, respectively. If
2745 the left color is not specified, it is taken to be the
2746 same as the right color. If the bottom color is not
2747 specified, it is taken to be the same as the top color. If
2748 the right color is not specified, it is taken to be the
2749 same as the top color.
2753 \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 82
2756 \o \bold{Box Lengths} \target Box Lengths
2757 \o \l{#Length}{Length}\{1,4\}
2758 \o One to four occurrences of \l{#Length}{Length}, specifying the
2759 top, right, bottom, and left edges of a box,
2760 respectively. If the left length is not specified, it is
2761 taken to be the same as the right length. If the bottom
2762 length is not specified, is it taken to be the same as the
2763 top length. If the right length is not specified, it is
2764 taken to be the same as the top length.
2768 \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 83
2771 \o \bold{Brush} \target Brush
2772 \o \l{#Color}{Color} \BR
2775 \o Specifies a Color or a Gradient or an entry in the Palette.
2778 \o \bold{Color} \target Color
2779 \o \tt{rgb(\e{r}, \e{g}, \e{b})} \BR
2780 | \tt{rgba(\e{r}, \e{g}, \e{b}, \e{a})} \BR
2781 | \tt{hsv(\e{h}, \e{s}, \e{v})} \BR
2782 | \tt{hsva(\e{h}, \e{s}, \e{v}, \e{a})} \BR
2783 | \tt{#\e{rrggbb}} \BR
2784 | \l{QColor::setNamedColor()}{Color Name} \BR
2785 \o Specifies a color as RGB (red, green, blue) or RGBA
2786 (red, green, blue, alpha) or HSV (hue, saturation, value) or HSVA
2787 (hue, saturation, value, alpha) or a named color. The \c rgb() or \c rgba()
2788 syntax can be used with integer values between 0 and 255, or with
2789 percentages. The value of s, v, and a in \c hsv() or \c hsva() must all
2790 be in the range 0-255; the value of h must be in the range 0-359.
2794 \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 84
2796 \note The RGB colors allowed are the same as those allowed with
2798 \l{http://www.w3.org/TR/CSS21/syndata.html#color-units}{here}.
2801 \o \bold{Font} \target Font
2802 \o (\l{#Font Style}{Font Style} | \l{#Font Weight}{Font Weight}){0,2} \l{#Font Size}{Font Size} String
2803 \o Shorthand font property.
2806 \o \bold{Font Size} \target Font Size
2808 \o The size of a font.
2811 \o \bold{Font Style} \target Font Style
2815 \o The style of a font.
2818 \o \bold{Font Weight} \target Font Weight
2825 \o The weight of a font.
2828 \o \bold{Gradient} \target Gradient
2829 \o \c qlineargradient \BR
2830 | \c qradialgradient \BR
2831 | \c qconicalgradient
2832 \o Specifies gradient fills. There are three types of gradient fills:
2835 \o \e{Linear} gradients interpolate colors between start and
2837 \o \e{Radial} gradients interpolate colors between a focal
2838 point and end points on a circle surrounding it.
2839 \o \e{Conical} gradients interpolate colors around a center
2843 Gradients are specified in Object Bounding Mode. Imagine the box
2844 in which the gradient is rendered, to have its top left corner at (0, 0)
2845 and its bottom right corner at (1, 1). Gradient parameters are
2846 then specified as percentages from 0 to 1. These values are
2847 extrapolated to actual box coordinates at runtime. It is possible
2848 specify values that lie outside the bounding box (-0.6 or 1.8, for
2851 \warning The stops have to appear sorted in ascending order.
2855 \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 85
2858 \o \bold{Icon} \target Icon
2859 \o (\l{#Url}{Url} (\c disabled | \c active | \c normal | \c selected)?
2860 (\c on | \c off)? )*
2861 \o A list of url, QIcon::Mode and QIcon::State.
2864 \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 86
2867 \o \bold{Length} \target Length
2868 \o \l{#Number}{Number} (\c px | \c pt | \c em | \c ex)?
2869 \o A number followed by a measurement unit. The CSS standard recommends
2870 that user agents must
2871 \l{http://www.w3.org/TR/CSS21/syndata.html#illegalvalues}{ignore}
2872 a declaration with an illegal value. In Qt, it is mandatory to
2873 specify measurement units. For compatibility with earlier versions
2874 of Qt, numbers without measurement units are treated as pixels
2875 in most contexts. The supported units are:
2879 \o \c pt: the size of one point (i.e., 1/72 of an inch)
2880 \o \c em: the em width of the font (i.e., the width of 'M')
2881 \o \c ex: the ex width of the font (i.e., the height of 'x')
2885 \o \bold{Number} \target Number
2886 \o A decimal integer or a real number
2887 \o Examples: \c 0, \c 18, \c +127, \c -255, \c 12.34, \c -.5,
2891 \o \bold{Origin} \target Origin
2896 \o Indicates which of four rectangles to use.
2899 \o \c margin: The margin rectangle. The margin falls outside the border.
2900 \o \c border: The border rectangle. This is where any border is drawn.
2901 \o \c padding: The padding rectangle. Unlike the margins,
2902 padding is located inside the border.
2903 \o \c content: The content rectangle. This specifies where
2904 the actual contents go, excluding any
2905 padding, border, or margin.
2908 See also \l{The Box Model}.
2911 \o \bold{PaletteRole} \target PaletteRole
2912 \o \c alternate-base \BR
2914 | \c bright-text \BR
2916 | \c button-text \BR
2919 | \c highlighted-text \BR
2922 | \c link-visited \BR
2928 | \c window-text \BR
2929 \o These values correspond the \l{QPalette::ColorRole}{Color roles}
2930 in the widget's QPalette.
2933 \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 87
2936 \o \bold{Radius} \target Radius
2937 \o \l{#Length}{Length}\{1, 2\}
2938 \o One or two occurrences of \l{#Length}{Length}. If only one length is
2939 specified, it is used as the radius of the quarter circle
2940 defining the corner. If two lengths are specified, the
2941 first length is the horizontal radius of a quarter
2942 ellipse, whereas the second length is the vertical radius.
2945 \o \bold{Repeat} \target Repeat
2950 \o A value indicating the nature of repetition.
2953 \o \c repeat-x: Repeat horizontally.
2954 \o \c repeat-y: Repeat vertically.
2955 \o \c repeat: Repeat horizontally and vertically.
2956 \o \c no-repeat: Don't repeat.
2960 \o \bold{Url} \target Url
2961 \o \tt{url(\e{filename})}
2962 \o \tt{\e{filename}} is the name of a file on the local disk
2963 or stored using \l{the Qt Resource System}. Setting an
2964 image implicitly sets the width and height of the element.
2968 \section1 List of Pseudo-States
2970 The following pseudo-states are supported:
2977 \row \o \c :active \target active
2978 \o This state is set when the widget resides in an active window.
2981 \o \c :adjoins-item \target adjoins-item-ps
2982 \o This state is set when the \l{#branch-sub}{::branch} of a QTreeView
2983 is adjacent to an item.
2986 \o \c :alternate \target alternate-ps
2987 \o This state is set for every alternate row whe painting the row of
2988 a QAbstractItemView when QAbstractItemView::alternatingRowColors()
2992 \o \c :bottom \target bottom-ps
2993 \o The item is positioned at the bottom. For example, a QTabBar
2994 that has its tabs positioned at the bottom.
2997 \o \c :checked \target checked-ps
2998 \o The item is checked. For example, the
2999 \l{QAbstractButton::checked}{checked} state of QAbstractButton.
3002 \o \c :closable \target closable-ps
3003 \o The items can be closed. For example, the QDockWidget has the
3004 QDockWidget::DockWidgetClosable feature turned on.
3007 \o \c :closed \target closed-ps
3008 \o The item is in the closed state. For example, an non-expanded
3012 \o \c :default \target default-ps
3013 \o The item is the default. For example, a
3014 \l{QPushButton::default}{default} QPushButton or a default action
3018 \o \c :disabled \target disabled-ps
3019 \o The item is \l{QWidget::enabled}{disabled}.
3022 \o \c :editable \target editable-ps
3023 \o The QComboBox is editable.
3026 \o \c :edit-focus \target edit-focus-ps
3027 \o The item has edit focus (See QStyle::State_HasEditFocus). This state
3028 is available only for Qt Extended applications.
3031 \o \c :enabled \target enabled-ps
3032 \o The item is \l{QWidget::enabled}{enabled}.
3035 \o \c :exclusive \target exclusive-ps
3036 \o The item is part of an exclusive item group. For example, a menu
3037 item in a exclusive QActionGroup.
3040 \o \c :first \target first-ps
3041 \o The item is the first (in a list). For example, the first
3045 \o \c :flat \target flat-ps
3046 \o The item is flat. For example, a
3047 \l{QPushButton::flat}{flat} QPushButton.
3050 \o \c :floatable \target floatable-ps
3051 \o The items can be floated. For example, the QDockWidget has the
3052 QDockWidget::DockWidgetFloatable feature turned on.
3055 \o \c :focus \target focus-ps
3056 \o The item has \l{QWidget::hasFocus()}{input focus}.
3059 \o \c :has-children \target has-children-ps
3060 \o The item has children. For example, an item in a
3061 QTreeView that has child items.
3064 \o \c :has-siblings \target has-siblings-ps
3065 \o The item has siblings. For example, an item in a
3066 QTreeView that siblings.
3069 \o \c :horizontal \target horizontal-ps
3070 \o The item has horizontal orientation
3073 \o \c :hover \target hover-ps
3074 \o The mouse is hovering over the item.
3077 \o \c :indeterminate \target indeterminate-ps
3078 \o The item has indeterminate state. For example, a QCheckBox
3079 or QRadioButton is \l{Qt::PartiallyChecked}{partially checked}.
3082 \o \c :last \target last-ps
3083 \o The item is the last (in a list). For example, the last
3087 \o \c :left \target left-ps
3088 \o The item is positioned at the left. For example, a QTabBar
3089 that has its tabs positioned at the left.
3092 \o \c :maximized \target maximized-ps
3093 \o The item is maximized. For example, a maximized QMdiSubWindow.
3096 \o \c :middle \target middle-ps
3097 \o The item is in the middle (in a list). For example, a tab
3098 that is not in the beginning or the end in a QTabBar.
3101 \o \c :minimized \target minimized-ps
3102 \o The item is minimized. For example, a minimized QMdiSubWindow.
3105 \o \c :movable \target movable-ps
3106 \o The item can be moved around. For example, the QDockWidget has the
3107 QDockWidget::DockWidgetMovable feature turned on.
3110 \o \c :no-frame \target no-frame-ps
3111 \o The item has no frame. For example, a frameless QSpinBox
3115 \o \c :non-exclusive \target non-exclusive-ps
3116 \o The item is part of a non-exclusive item group. For example, a menu
3117 item in a non-exclusive QActionGroup.
3120 \o \c :off \target off-ps
3121 \o For items that can be toggled, this applies to items
3125 \o \c :on \target on-ps
3126 \o For items that can be toggled, this applies to widgets
3130 \o \c :only-one \target only-one-ps
3131 \o The item is the only one (in a list). For example, a lone tab
3135 \o \c :open \target open-ps
3136 \o The item is in the open state. For example, an expanded
3137 item in a QTreeView, or a QComboBox or QPushButton with
3141 \o \c :next-selected \target next-selected-ps
3142 \o The next item (in a list) is selected. For example, the
3143 selected tab of a QTabBar is next to this item.
3146 \o \c :pressed \target pressed-ps
3147 \o The item is being pressed using the mouse.
3150 \o \c :previous-selected \target previous-selected-ps
3151 \o The previous item (in a list) is selected. For example, a
3152 tab in a QTabBar that is next to the selected tab.
3155 \o \c :read-only \target read-only-ps
3156 \o The item is marked read only or non-editable. For example,
3157 a read only QLineEdit or a non-editable QComboBox.
3160 \o \c :right \target right-ps
3161 \o The item is positioned at the right. For example, a QTabBar
3162 that has its tabs positioned at the right.
3165 \o \c :selected \target selected-ps
3166 \o The item is selected. For example, the selected tab in
3167 a QTabBar or the selected item in a QMenu.
3170 \o \c :top \target top-ps
3171 \o The item is positioned at the top. For example, a QTabBar
3172 that has its tabs positioned at the top.
3175 \o \c :unchecked \target unchecked-ps
3177 \l{QAbstractButton::checked}{unchecked}.
3180 \o \c :vertical \target vertical-ps
3181 \o The item has vertical orientation.
3184 \o \c :window \target window-ps
3185 \o The widget is a window (i.e top level widget)
3190 \section1 List of Sub-Controls
3192 The following subcontrols are available:
3200 \o \c ::add-line \target add-line-sub
3201 \o The button to add a line of a QScrollBar.
3204 \o \c ::add-page \target add-page-sub
3205 \o The region between the handle (slider) and the \l{#add-line-sub}{add-line}
3209 \o \c ::branch \target branch-sub
3210 \o The branch indicator of a QTreeView.
3213 \o \c ::chunk \target chunk-sub
3214 \o The progress chunk of a QProgressBar.
3217 \o \c ::close-button \target close-button-sub
3218 \o The close button of a QDockWidget or tabs of QTabBar
3221 \o \c ::corner \target corner-sub
3222 \o The corner between two scrollbars in a QAbstractScrollArea
3225 \o \c ::down-arrow \target down-arrow-sub
3226 \o The down arrow of a QComboBox, QHeaderView (sort indicator),
3227 QScrollBar or QSpinBox.
3230 \o \c ::down-button \target down-button-sub
3231 \o The down button of a QScrollBar or a QSpinBox.
3234 \o \c ::drop-down \target drop-down-sub
3235 \o The drop-down button of a QComboBox.
3238 \o \c ::float-button \target float-button-sub
3239 \o The float button of a QDockWidget
3242 \o \c ::groove \target groove-sub
3243 \o The groove of a QSlider.
3246 \o \c ::indicator \target indicator-sub
3247 \o The indicator of a QAbstractItemView, a QCheckBox, a QRadioButton,
3248 a checkable QMenu item or a checkable QGroupBox.
3251 \o \c ::handle \target handle-sub
3252 \o The handle (slider) of a QScrollBar, a QSplitter, or a QSlider.
3255 \o \c ::icon \target icon-sub
3256 \o The icon of a QAbstractItemView or a QMenu.
3259 \o \c ::item \target item-sub
3260 \o An item of a QAbstractItemView, a QMenuBar, a QMenu, or
3264 \o \c ::left-arrow \target left-arrow-sub
3265 \o The left arrow of a QScrollBar.
3268 \o \c ::left-corner \target left-corner-sub
3269 \o The left corner of a QTabWidget. For example, this control can be
3270 used to control position the left corner widget in a QTabWidget.
3273 \o \c ::menu-arrow \target menu-arrow-sub
3274 \o The arrow of a QToolButton with a menu.
3277 \o \c ::menu-button \target menu-button-sub
3278 \o The menu button of a QToolButton.
3281 \o \c ::menu-indicator \target menu-indicator-sub
3282 \o The menu indicator of a QPushButton.
3285 \o \c ::right-arrow \target right-arrow-sub
3286 \o The right arrow of a QMenu or a QScrollBar.
3289 \o \c ::pane \target pane-sub
3290 \o The pane (frame) of a QTabWidget.
3293 \o \c ::right-corner \target right-corner-sub
3294 \o The right corner of a QTabWidget. For example, this control can be
3295 used to control the position the right corner widget in a QTabWidget.
3298 \o \c ::scroller \target scroller-sub
3299 \o The scroller of a QMenu or QTabBar.
3302 \o \c ::section \target section-sub
3303 \o The section of a QHeaderView.
3306 \o \c ::separator \target separator-sub
3307 \o The separator of a QMenu or in a QMainWindow.
3310 \o \c ::sub-line \target sub-line-sub
3311 \o The button to subtract a line of a QScrollBar.
3314 \o \c ::sub-page \target sub-page-sub
3315 \o The region between the handle (slider) and the \l{#sub-line-sub}{sub-line}
3319 \o \c ::tab \target tab-sub
3320 \o The tab of a QTabBar or QToolBox.
3323 \o \c ::tab-bar \target tab-bar-sub
3324 \o The tab bar of a QTabWidget. This subcontrol exists only to
3325 control the position of the QTabBar inside the QTabWidget. To
3326 style the tabs using the \l{#tab-sub}{::tab} subcontrol.
3329 \o \c ::tear \target tear-sub
3330 \o The tear indicator of a QTabBar.
3333 \o \c ::tearoff \target tearoff-sub
3334 \o The tear-off indicator of a QMenu.
3337 \o \c ::text \target text-ps
3338 \o The text of a QAbstractItemView.
3341 \o \c ::title \target title-sub
3342 \o The title of a QGroupBox or a QDockWidget.
3345 \o \c ::up-arrow \target up-arrow-sub
3346 \o The up arrow of a QHeaderView (sort indicator), QScrollBar
3350 \o \c ::up-button \target up-button-sub
3351 \o The up button of a QSpinBox.
3355 See \l{Customizing the QPushButton's Menu Indicator Sub-Control}
3356 for an example of how to customize a subcontrol.
3360 \page stylesheet-examples.html
3361 \contentspage {Qt Style Sheet}{Contents}
3362 \previouspage Qt Style Sheets Reference
3363 \title Qt Style Sheets Examples
3365 We will now see a few examples to get started with using Qt Style Sheets.
3368 \section1 Style Sheet Usage
3370 \section2 Customizing the Foreground and Background Colors
3372 Let's start by setting yellow as the background color of all
3373 \l{QLineEdit}s in an application. This could be achieved like
3376 \snippet doc/src/snippets/code/doc_src_stylesheet.cpp 88
3378 If we want the property to apply only to the \l{QLineEdit}s that are
3379 children (or grandchildren or grand-grandchildren) of a specific dialog,
3380 we would rather do this:
3382 \snippet doc/src/snippets/code/doc_src_stylesheet.cpp 89
3384 If we want the property to apply only to one specific QLineEdit,
3385 we can give it a name using QObject::setObjectName() and use an
3386 ID Selector to refer to it:
3388 \snippet doc/src/snippets/code/doc_src_stylesheet.cpp 90
3390 Alternatively, we can set the
3391 \l{Qt Style Sheets Reference#background-prop}{background-color} property directly on the
3392 QLineEdit, omitting the selector:
3394 \snippet doc/src/snippets/code/doc_src_stylesheet.cpp 91
3396 To ensure a good contrast, we should also specify a suitable
3399 \snippet doc/src/snippets/code/doc_src_stylesheet.cpp 92
3401 It might be a good idea to change the colors used for selected
3404 \snippet doc/src/snippets/code/doc_src_stylesheet.cpp 93
3407 \section2 Customizing Using Dynamic Properties
3409 There are many situations where we need to present a form that
3410 has mandatory fields. To indicate to the user that the field is
3411 mandatory, one effective (albeit esthetically dubious) solution
3412 is to use yellow as the background color for those fields. It
3413 turns out this is very easy to implement using Qt Style Sheets.
3414 First, we would use the following application-wide style sheet:
3416 \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 94
3418 This means that every widget whose \c mandatoryField Qt property
3419 is set to true would have a yellow background.
3421 Then, for each mandatory field widget, we would simply create a
3422 \c mandatoryField property on the fly and set it to true. For
3425 \snippet doc/src/snippets/code/doc_src_stylesheet.cpp 95
3427 \section2 Customizing a QPushButton Using the Box Model
3429 This time, we will show how to create a red QPushButton. This
3430 QPushButton would presumably be connected to a very destructive
3433 First, we are tempted to use this style sheet:
3435 \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 96
3437 However, the result is a boring, flat button with no borders:
3439 \image stylesheet-redbutton1.png A flat red button
3441 What happened is this:
3444 \o We have made a request that cannot be satisfied using the
3445 native styles alone (e.g., the Windows XP theme engine doesn't
3446 let us specify the background color of a button).
3447 \o Therefore, the button is rendered using style sheets.
3448 \o We haven't specified any values for
3449 \l{Qt Style Sheets Reference#border-width-prop}{border-width} and
3450 \l{Qt Style Sheets Reference#border-style-prop}{border-style}, so by default we obtain
3451 a 0-pixel wide border of style \c none.
3454 Let's improve the situation by specifying a border:
3456 \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 97
3458 \image stylesheet-redbutton2.png A red button with a beige border
3460 Things look already a lot better. But the button looks a bit
3461 cramped. Let's specify some spacing between the border and the
3462 text using the \l{Qt Style Sheets Reference#padding-prop}{padding}. Additionally, we will
3463 enforce a minimum width, round the corners, and specify a larger
3464 font to make the button look nicer:
3466 \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 98
3468 \image stylesheet-redbutton3.png A red button with a round beige border and big, bold text
3470 The only issue remaining is that the button doesn't react when we
3471 press it. We can fix this by specifying a slightly different
3472 background color and use a different border style.
3474 \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 99
3476 \section2 Customizing the QPushButton's Menu Indicator Sub-Control
3478 Subcontrols give access to the sub-elements of a widget. For
3479 example, a QPushButton associated with a menu (using
3480 QPushButton::setMenu()) has a menu indicator. Let's customize
3481 the menu indicator for the red push button:
3483 \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 100
3485 By default, the menu indicator is located at the bottom-right
3486 corner of the padding rectangle. We can change this by specifying
3487 \l{Qt Style Sheets Reference#subcontrol-position-prop}{subcontrol-position} and
3488 \l{Qt Style Sheets Reference#subcontrol-origin-prop}{subcontrol-origin} to anchor the
3489 indicator differently. We can also use \l{Qt Style Sheets Reference#top-prop}{top} and
3490 \l{Qt Style Sheets Reference#left-prop}{left} to move the indicator by a few pixels. For
3493 \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 101
3495 This positions the \c myindicator.png to the center right of the
3496 QPushButton's \l{Qt Style Sheets Reference#padding-prop}{padding} rectangle (see
3497 \l{Qt Style Sheets Reference#subcontrol-origin-prop}{subcontrol-origin} for more
3500 \section2 Complex Selector Example
3502 Since red seems to be our favorite color, let's make the text in
3503 QLineEdit red by setting the following application-wide
3506 \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 102
3508 However, we would like to give a visual indication that a
3509 QLineEdit is read-only by making it appear gray:
3511 \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 103
3513 At some point, our design team comes with the requirement that
3514 all \l{QLineEdit}s in the registration form (with the
3515 \l{QObject::objectName}{object name} \c registrationDialog) to be
3518 \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 104
3520 A few UI design meetings later, we decide that all our
3521 \l{QDialog}s should have brown colored \l{QLineEdit}s:
3523 \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 105
3525 Quiz: What happens if we have a read-only QLineEdit in a QDialog?
3526 [Hint: The \l{The Style Sheet Syntax#Conflict Resolution}{Conflict Resolution} section above explains
3527 what happens in cases like this.]
3529 \section1 Customizing specific widgets
3531 This section provides examples to customize specific widgets using Style Sheets.
3533 \section2 Customizing QAbstractScrollArea
3535 The background of any QAbstractScrollArea (Item views, QTextEdit
3536 and QTextBrowser) can be set using the background properties. For example,
3537 to set a background-image that scrolls with the scroll bar:
3538 \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 106
3540 If the background-image is to be fixed with the viewport:
3541 \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 107
3543 \section2 Customizing QCheckBox
3545 Styling of a QCheckBox is almost indentical to styling a QRadioButton. The
3546 main difference is that a tristate QCheckBox has an indeterminate state.
3548 \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 108
3550 \section2 Customizing QComboBox
3552 We will look at an example where the drop down button of a QComboBox
3553 appears "merged" with the combo box frame.
3555 \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 109
3557 The pop-up of the QComboBox is a QAbstractItemView and is styled using
3558 the descendant selector:
3559 \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 110
3561 \section2 Customizing QDockWidget
3563 The title bar and the buttons of a QDockWidget can be customized as
3566 \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 111
3568 If one desires to move the dock widget buttons to the left, the following
3569 style sheet can be used:
3571 \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 112
3573 \note To customize the separator (resize handle) of a QDockWidget,
3574 use QMainWindow::separator.
3576 \section2 Customizing QFrame
3578 A QFrame is styled using the \l{The Box Model}.
3580 \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 113
3582 \section2 Customizing QGroupBox
3584 Let us look at an example that moves the QGroupBox's title to
3587 \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 114
3589 For a checkable QGroupBox, use the \{#indicator-sub}{::indicator} subcontrol
3590 and style it exactly like a QCheckBox (i.e)
3592 \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 115
3594 \section2 Customizing QHeaderView
3596 QHeaderView is customized as follows:
3598 \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 116
3600 \section2 Customizing QLineEdit
3602 The frame of a QLineEdit is styled using the \l{The Box Model}. To
3603 create a line edit with rounded corners, we can set:
3604 \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 117
3606 The password character of line edits that have QLineEdit::Password
3607 echo mode can be set using:
3608 \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 118
3610 The background of a read only QLineEdit can be modified as below:
3611 \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 119
3613 \section2 Customizing QListView
3615 The background color of alternating rows can be customized using the following
3618 \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 120
3620 To provide a special background when you hover over items, we can use the
3621 \l{item-sub}{::item} subcontrol. For example,
3623 \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 121
3625 \section2 Customizing QMainWindow
3627 The separator of a QMainWindow can be styled as follows:
3629 \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 122
3631 \section2 Customizing QMenu
3633 Individual items of a QMenu are styled using the 'item' subcontrol as
3636 \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 123
3638 For a more advanced customization, use a style sheet as follows:
3640 \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 124
3642 \section2 Customizing QMenuBar
3644 QMenuBar is styled as follows:
3646 \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 125
3648 \section2 Customizing QProgressBar
3650 The QProgressBar's \l{stylesheet-reference.html#border-prop}{border},
3651 \l{stylesheet-reference.html#chunk-sub}{chunk}, and
3652 \l{stylesheet-reference.html#text-align-prop}{text-align} can be customized using
3653 style sheets. However, if one property or sub-control is customized,
3654 all the other properties or sub-controls must be customized as well.
3656 \image progressBar-stylesheet.png
3658 For example, we change the \l{stylesheet-reference.html#border-prop}
3659 {border} to grey and the \l{stylesheet-reference.html#chunk-sub}{chunk}
3662 \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 126
3664 This leaves the \l{stylesheet-reference.html#text-align-prop}
3665 {text-align}, which we customize by positioning the text in the center of
3668 \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 127
3670 A \l{stylesheet-reference.html#margin-prop}{margin} can be included to
3671 obtain more visible chunks.
3673 \image progressBar2-stylesheet.png
3675 In the screenshot above, we use a
3676 \l{stylesheet-reference.html#margin-prop}{margin} of 0.5 pixels.
3678 \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 128
3680 \section2 Customizing QPushButton
3682 A QPushButton is styled as follows:
3683 \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 129
3685 For a QPushButton with a menu, use the
3686 \l{Qt Style Sheets Reference#menu-indicator-sub}{::menu-indicator}
3689 \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 130
3691 Checkable QPushButton have the \l{Qt Style Sheets Reference#checked-ps}
3692 {:checked} pseudo state set.
3694 \section2 Customizing QRadioButton
3696 The indicator of a QRadioButton can be changed using:
3697 \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 131
3699 \section2 Customizing QScrollBar
3701 The QScrollBar can be styled using its subcontrols like
3702 \l{stylesheet-reference.html#handle-sub}{handle},
3703 \l{stylesheet-reference.html#add-line-sub}{add-line},
3704 \l{stylesheet-reference.html#sub-line-sub}{sub-line}, and so on. Note that
3705 if one property or sub-control is customized, all the other properties or
3706 sub-controls must be customized as well.
3708 \image stylesheet-scrollbar1.png
3710 The scroll bar above has been styled in aquamarine with a solid grey
3713 \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 132
3715 \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 133
3717 \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 134
3719 The \l{stylesheet-reference.html#left-arrow-sub}{left-arrow} and
3720 \l{stylesheet-reference.html#right-arrow-sub}{right-arrow} have a solid grey
3721 border with a white background. As an alternative, you could also embed the
3724 \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 135
3726 If you want the scroll buttons of the scroll bar to be placed together
3727 (instead of the edges) like on Mac OS X, you can use the following
3729 \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 136
3731 The scroll bar using the above stylesheet looks like this:
3732 \image stylesheet-scrollbar2.png
3735 To customize a vertical scroll bar use a style sheet similar to the following:
3736 \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 137
3738 \section2 Customizing QSizeGrip
3740 QSizeGrip is usually styled by just setting an image.
3742 \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 138
3744 \section2 Customizing QSlider
3746 You can style horizontal slider as below:
3747 \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 139
3749 If you want to change the color of the slider parts before and after the handle, you can use the add-page
3750 and sub-page subcontrols. For example, for a vertical slider:
3752 \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 140
3754 \section2 Customizing QSpinBox
3756 QSpinBox can be completely customized as below (the style sheet has commentary inline):
3758 \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 141
3761 \section2 Customizing QSplitter
3763 A QSplitter derives from a QFrame and hence can be styled like a QFrame.
3764 The grip or the handle is customized using the
3765 \l{Qt Style Sheets Reference#handle-sub}{::handle} subcontrol.
3767 \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 142
3769 \section2 Customizing QStatusBar
3771 We can provide a background for the status bar and a border for items
3772 inside the status bar as follows:
3773 \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 143
3775 Note that widgets that have been added to the QStatusBar can be styled
3776 using the descendant declaration (i.e)
3777 \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 144
3779 \section2 Customizing QTabWidget and QTabBar
3781 \image tabWidget-stylesheet1.png
3783 For the screenshot above, we need a stylesheet as follows:
3785 \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 145
3787 Often we require the tabs to overlap to look like below:
3788 \image tabWidget-stylesheet2.png
3790 For a tab widget that looks like above, we make use of
3791 \l{http://www.communitymx.com/content/article.cfm?cid=B0029}
3792 {negative margins}. The resulting stylesheet looks like this:
3794 \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 146
3796 To move the tab bar to the center (as below), we require the following stylesheet:
3797 \image tabWidget-stylesheet3.png
3799 \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 147
3801 The tear indicator and the scroll buttons can be further customized as follows:
3802 \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 148
3804 Since Qt 4.6 the close button can be customized as follow:
3805 \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 159
3807 \section2 Customizing QTableView
3809 Suppose we'd like our selected item in QTableView to have bubblegum pink
3810 fade to white as its background.
3812 \image tableWidget-stylesheet.png
3814 This is possible with the
3815 \l{stylesheet-reference.html#selection-background-color-prop}
3816 {selection-background-color} property and the syntax required is:
3818 \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 149
3820 The corner widget can be customized using the following style sheet
3822 \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 150
3824 \section2 Customizing QToolBar
3826 The background and the handle of a QToolBar is customized as below:
3827 \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 151
3829 \section2 Customizing QToolBox
3831 The tabs of the QToolBox are customized using the 'tab' subcontrol.
3833 \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 152
3835 \section2 Customizing QToolButton
3837 There are three types of QToolButtons.
3839 \i The QToolButton has no menu. In this case, the QToolButton is styled
3840 exactly like QPushButton. See
3841 \l{#Customizing QPushButton}{Customizing QPushButton} for an
3844 \i The QToolButton has a menu and has the QToolButton::popupMode set to
3845 QToolButton::DelayedPopup or QToolButton::InstantPopup. In this case,
3846 the QToolButton is styled exactly like a QPushButton with a menu.
3847 See \l{#Customizing QPushButton}{Customizing QPushButton} for an
3848 example of the usage of the menu-indicator pseudo state.
3850 \i The QToolButton has its QToolButton::popupMode set to
3851 QToolButton::MenuButtonPopup. In this case, we style it as follows:
3854 \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 153
3857 \section2 Customizing QToolTip
3859 QToolTip is customized exactly like a QLabel. In addition, for platforms
3860 that support it, the opacity property may be set to adjust the opacity.
3863 \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 154
3865 \section2 Customizing QTreeView
3867 The background color of alternating rows can be customized using the following
3870 \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 155
3872 To provide a special background when you hover over items, we can use the
3873 \l{item-sub}{::item} subcontrol. For example,
3874 \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 156
3876 The branches of a QTreeView are styled using the
3877 \l{Qt Style Sheets Reference#branch-sub}{::branch} subcontrol. The
3878 following stylesheet color codes the various states when drawing
3881 \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 157
3883 Colorful, though it is, a more useful example can be made using the
3888 \o \inlineimage stylesheet-vline.png
3889 \o \inlineimage stylesheet-branch-more.png
3890 \o \inlineimage stylesheet-branch-end.png
3891 \o \inlineimage stylesheet-branch-closed.png
3892 \o \inlineimage stylesheet-branch-open.png
3897 \o branch-closed.png
3901 \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 158
3903 The resulting tree view looks like this:
3905 \image stylesheet-treeview.png
3907 \sa {Style Sheet Example}, {Supported HTML Subset}, QStyle
3910 \section1 Common mistakes
3912 This section lists some common mistakes when using stylesheets.
3914 \section2 QPushButton and images
3916 When styling a QPushButton, it is often desirable to use an image as the
3917 button graphic. It is common to try the
3918 \l{Qt Style Sheets Reference#background-image-prop}{background-image}
3920 but this has a number of drawbacks: For instance, the background will
3921 often appear hidden behind the button decoration, because it is not
3922 considered a background. In addition, if the button is resized, the
3923 entire background will be stretched or tiled, which does not
3926 It is better to use the
3927 \l{Qt Style Sheets Reference#border-image-prop}{border-image}
3928 property, as it will always display the image,
3929 regardless of the background (you can combine it with a background if it
3930 has alpha values in it), and it has special settings to deal with button
3933 Consider the following snippet:
3935 \snippet doc/src/snippets/stylesheet/common-mistakes.cpp 1
3937 This will produce a button looking like this:
3939 \image stylesheet-border-image-normal.png
3941 The numbers after the url gives the top, right, bottom and left number of
3942 pixels, respectively. These numbers correspond to the border and should not
3943 stretch when the size changes.
3944 Whenever you resize the button, the middle part of the image will stretch
3945 in both directions, while the pixels specified in the stylesheet
3946 will not. This makes the borders of the button look more natural, like
3951 \o \inlineimage stylesheet-border-image-stretched.png
3958 \o \inlineimage stylesheet-border-image-wrong.png