<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<!-- /tmp/qt-4.2.1-harald-1161357942206/qt-x11-opensource-src-4.2.1/doc/src/stylesheet.qdoc -->
<head>
<title>Qt 4.2: Qt Style Sheets</title>
<link href="classic.css" rel="stylesheet" type="text/css" />
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="left" valign="top" width="32"><a href="http://www.trolltech.com/products/qt"><img src="images/qt-logo.png" align="left" width="32" height="32" border="0" /></a></td>
<td width="1"> </td><td class="postheader" valign="center"><a href="index.html"><font color="#004faf">Home</font></a> · <a href="classes.html"><font color="#004faf">All Classes</font></a> · <a href="mainclasses.html"><font color="#004faf">Main Classes</font></a> · <a href="groups.html"><font color="#004faf">Grouped Classes</font></a> · <a href="modules.html"><font color="#004faf">Modules</font></a> · <a href="functions.html"><font color="#004faf">Functions</font></a></td>
<td align="right" valign="top" width="230"><a href="http://www.trolltech.com"><img src="images/trolltech-logo.png" align="right" width="203" height="32" border="0" /></a></td></tr></table><h1 align="center">Qt Style Sheets<br /><small></small></h1>
<a name="style-sheet"></a><a name="stylesheet"></a><p>Qt Style Sheets are a powerful mechanism that allows you to customize the appearance of widgets, in addition to what is already possible by subclassing <a href="qstyle.html">QStyle</a>. The concepts, terminology, and syntax of Qt Style Sheets are heavily inspired by HTML <a href="http://www.w3.org/Style/CSS/">Cascading Style Sheets (CSS)</a> but adapted to the world of widgets.</p>
<p>Topics:</p>
<ul><li><a href="#overview">Overview</a></li>
<li><a href="#the-style-sheet-syntax">The Style Sheet Syntax</a></li>
<ul><li><a href="#style-rules">Style Rules</a></li>
<li><a href="#selector-types">Selector Types</a></li>
<li><a href="#sub-controls">Sub-Controls</a></li>
<li><a href="#pseudo-states">Pseudo-States</a></li>
<li><a href="#conflict-resolution">Conflict Resolution</a></li>
<li><a href="#cascading">Cascading</a></li>
</ul>
<li><a href="#customizing-qt-widgets-using-style-sheets">Customizing Qt Widgets Using Style Sheets</a></li>
<ul><li><a href="#list-of-stylable-widgets">List of Stylable Widgets</a></li>
<li><a href="#list-of-attributes">List of Attributes</a></li>
<li><a href="#list-of-attribute-types">List of Attribute Types</a></li>
<li><a href="#list-of-pseudo-states">List of Pseudo-States</a></li>
<li><a href="#list-of-sub-controls">List of Sub-Controls</a></li>
</ul>
<li><a href="#the-box-model">The Box Model</a></li>
<li><a href="#examples">Examples</a></li>
<ul><li><a href="#customizing-the-foreground-and-background-colors">Customizing the Foreground and Background Colors</a></li>
<li><a href="#customizing-a-qpushbutton-using-the-box-model">Customizing a QPushButton Using the Box Model</a></li>
<li><a href="#customizing-the-qpushbutton-s-menu-indicator-sub-control">Customizing the QPushButton's Menu Indicator Sub-Control</a></li>
<li><a href="#complex-selector-example">Complex Selector Example</a></li>
</ul>
</ul>
<a name="overview"></a>
<h2>Overview</h2>
<p>Styles sheets are textual specifications that can be set on the whole application using <a href="qapplication.html#styleSheet-prop">QApplication::setStyleSheet</a>() or on a specific widget (and its children) using <a href="qwidget.html#styleSheet-prop">QWidget::setStyleSheet</a>(). If several style sheets are set at different levels, Qt derives the effective style sheet from all of those that are set. This is called cascading.</p>
<p>For example, the following style sheet specifies that all <a href="qlineedit.html">QLineEdit</a>s should use yellow as their background color, and all <a href="qcheckbox.html">QCheckBox</a>es should use red as the text color:</p>
<pre> QLineEdit { background: yellow }
QCheckBox { color: red }</pre>
<p>For this kind of customization, style sheets are much more powerful than <a href="qpalette.html">QPalette</a>. For example, it might be tempting to set the <a href="qpalette.html#ColorRole-enum">QPalette::Button</a> role to red for a <a href="qpushbutton.html">QPushButton</a> to obtain a red push button. However, this wasn't guaranteed to work for all styles, because style authors are restricted by the different platforms' guidelines and (on Windows XP and Mac OS X) by the native theme engine.</p>
<p>Style sheets let you perform all kinds of customizations that are difficult or impossible to perform using <a href="qpalette.html">QPalette</a> alone. If you want yellow backgrounds for mandatory fields, red text for potentially destructive push buttons, or fancy check boxes, style sheets are the answer.</p>
<p>Style sheets are applied on top of the current <a href="qstyle.html">widget style</a>, meaning that your applications will still look native, but any style sheet constraints will be taken into consideration. Unlike palette fiddling, style sheets offer guarantees: If you set the background color of a <a href="qpushbutton.html">QPushButton</a> to be red, you can be assured that the button will have a red background in all styles, on all platforms. <a href="designer-manual.html#qt-designer">Qt Designer</a> provides style sheet integration, making it easy to view the effects of a style sheet in different <a href="qstyle.html">widget styles</a>.</p>
<p>In addition, style sheets can be used to provide a distinctive look and feel for your application, without having to subclass <a href="qstyle.html">QStyle</a>. For example, you can specify arbitrary images for radio buttons and check boxes to make them stand out. Using this technique, you can also achieve minor customizations that would normally require subclassing several style classes, such as specifying a <a href="qstyle.html#styleHint">style hint</a>. The Style Sheet example depicted below defines two distinctive style sheets that you can try out and modify at will.</p>
<p><table align="center" cellpadding="2" cellspacing="1" border="0">
<tr valign="top" class="odd"><td><img src="images/stylesheet-coffee-xp.png" /></td><td><img src="images/stylesheet-pagefold.png" /></td></tr>
</table></p>
<p>When a style sheet is active, the <a href="qstyle.html">QStyle</a> returned by <a href="qwidget.html#style">QWidget::style</a>() is a wrapper "style sheet" style, <i>not</i> the platform-specific style. The wrapper style ensures that any active style sheet is respected and otherwise forwards the drawing operations to the underlying, platform-specific style (e.g., <a href="qwindowsxpstyle.html">QWindowsXPStyle</a> on Windows XP).</p>
<p><b>Warning:</b> Qt style sheets are currently not supported for <a href="qmacstyle.html">QMacStyle</a> (the default style on Mac OS X). We plan to address this in Qt 4.3.</p>
<a name="the-style-sheet-syntax"></a>
<h2>The Style Sheet Syntax</h2>
<p>Qt Style Sheet terminology and syntactic rules are almost identical to those of HTML CSS. If you already know CSS, you can probably skim quickly through this section.</p>
<a name="style-rules"></a>
<h3>Style Rules</h3>
<p>Style sheets consist of a sequence of style rules. A <i>style rule</i> is made up of a selector and a declaration. The <i>selector</i> specifies which widgets are affected by the rule; the <i>declaration</i> specifies which attributes should be set on the widget. For example:</p>
<pre> QPushButton { color: red }</pre>
<p>In the above style rule, <tt>QPushButton</tt> is the selector and <tt>{ color: red }</tt> is the declaration. The rule specifies that <a href="qpushbutton.html">QPushButton</a> and its subclasses (e.g., <tt>MyPushButton</tt>) should use red as their foreground color.</p>
<p>Qt Style Sheet is generally case insensitive (i.e., <tt>color</tt>, <tt>Color</tt>, <tt>COLOR</tt>, and <tt>cOloR</tt> refer to the same attribute). The only exceptions are class names, <a href="qobject.html#objectName-prop">object names</a>, and Qt property names, which are case sensitive.</p>
<p>Several selectors can be specified for the same declaration, using commas (<tt>,</tt>) to separate the selectors. For example, the rule</p>
<pre> QPushButton, QLineEdit, QComboBox { color: red }</pre>
<p>is equivalent to this sequence of three rules:</p>
<pre> QPushButton { color: red }
QLineEdit { color: red }
QComboBox { color: red }</pre>
<p>The declaration part of a style rule is a list of <tt><i>attribute</i>: <i>value</i></tt> pairs, enclosed in braces (<tt>{}</tt>) and separated with semicolons. For example:</p>
<pre> QPushButton { color: red; background-color: white }</pre>
<p>See the <a href="#list-of-attributes">List of Attributes</a> section below for the list of attributes provided by Qt widgets.</p>
<a name="selector-types"></a>
<h3>Selector Types</h3>
<p>All the examples so far used the simplest type of selector, the Type Selector. Qt Style Sheets support all the <a href="http://www.w3.org/TR/REC-CSS2/selector.html#q1">selectors defined in CSS2</a>. The table below summarizes the most useful types of selectors.</p>
<p><table width="100%" align="center" cellpadding="2" cellspacing="1" border="0">
<thead><tr valign="top" class="qt-style"><th>Selector</th><th>Example</th><th>Explanation</th></tr></thead>
<tr valign="top" class="odd"><td>Universal Selector</td><td><tt>*</tt></td><td>Matches all widgets.</td></tr>
<tr valign="top" class="even"><td>Type Selector</td><td><tt>QPushButton</tt></td><td>Matches instances of <a href="qpushbutton.html">QPushButton</a> and of its subclasses.</td></tr>
<tr valign="top" class="odd"><td>Attribute Selector</td><td><tt>QPushButton[flat="false"]</tt></td><td>Matches instances of <a href="qpushbutton.html">QPushButton</a> that are not <a href="qpushbutton.html#flat-prop">flat</a>. You may use this selector to test for any Qt property specified using <a href="qobject.html#Q_PROPERTY">Q_PROPERTY</a>(). In addition, the special <tt>class</tt> property is supported, for the name of the class.<p>Instead of <tt>=</tt>, you can also use <tt>~=</tt> to test whether a <a href="qstringlist.html">QStringList</a> property contains a given <a href="qstring.html">QString</a>.</p>
<p><b>Warning:</b> If the value of the property changes after the style sheet has been set, it might be necessary to force a style sheet recomputation. One way to achieve this is to unset the style sheet and set it again.</p>
</td></tr>
<tr valign="top" class="even"><td>Class Selector</td><td><tt>.QPushButton</tt></td><td>Matches instances of <a href="qpushbutton.html">QPushButton</a>, but not of its subclasses.<p>This is equivalent to <tt>*[class~="QPushButton"]</tt>.</p>
</td></tr>
<tr valign="top" class="odd"><td>ID <a name="id-selector"></a> Selector</td><td><tt>QPushButton#okButton</tt></td><td>Matches all <a href="qpushbutton.html">QPushButton</a> instances whose <a href="qobject.html#objectName-prop">object name</a> is <tt>okButton</tt>.</td></tr>
<tr valign="top" class="even"><td>Descendant Selector</td><td><tt>QDialog QPushButton</tt></td><td>Matches all instances of <a href="qpushbutton.html">QPushButton</a> that are descendants (children, grandchildren, etc.) of a <a href="qdialog.html">QDialog</a>.</td></tr>
<tr valign="top" class="odd"><td>Child Selector</td><td><tt>QDialog > QPushButton</tt></td><td>Matches all instances of <a href="qpushbutton.html">QPushButton</a> that are direct children of a <a href="qdialog.html">QDialog</a>.</td></tr>
</table></p>
<a name="sub-controls"></a>
<h3>Sub-Controls</h3>
<p>For styling complex widgets, it is necessary to access sub-controls of the widget, such as the drop-down button of a <a href="qcombobox.html">QComboBox</a> or the up and down arrows of a <a href="qspinbox.html">QSpinBox</a>. Selectors may contain <i>sub-controls</i> that make it possible to restrict the application of a rule to specific widget sub-controls. For example:</p>
<pre> QComboBox::drop-down { image: url(dropdown.png) }</pre>
<p>The above rule styles the drop-down button of all <a href="qcombobox.html">QComboBox</a>es. Although the double-colon (<tt>::</tt>) syntax is reminiscent of CSS3 Pseudo-Elements, Qt Sub-Controls differ conceptually from these and have different cascading semantics.</p>
<p>When customizing a sub-control, we can either specify an image (using the <a href="#image-attr">image</a> attribute) or set the <a href="#width-attr">width</a> and <a href="#height-attr">weight</a> attributes. Otherwise, they are treated the same as widgets and can be styled using the the <a href="#box-model">box model</a>.</p>
<p>See the <a href="#list-of-sub-controls">List of Sub-Controls</a> below for a list of supported sub-controls, and <a href="#customizing-the-qpushbutton-s-menu-indicator-sub-control">Customizing the QPushButton's Menu Indicator Sub-Control</a> for a realistic example.</p>
<a name="pseudo-states"></a>
<h3>Pseudo-States</h3>
<p>Selectors may contain <i>pseudo-states</i> that denote that restrict the application of the rule based on the widget's state. Pseudo-states appear at the end of the selector, with a colon (<tt>:</tt>) in between. For example, the following rule applies when the mouse hovers over a <a href="qpushbutton.html">QPushButton</a>:</p>
<pre> QPushButton:hover { color: white }</pre>
<p>Pseudo-states can be chained, in which case a logical AND is implied. For example, the following rule applies to when the mouse hovers over a checked <a href="qcheckbox.html">QCheckBox</a>:</p>
<pre> QCheckBox:hover:checked { color: white }</pre>
<p>If needed, logical OR can be expressed using the comma operator:</p>
<pre> QCheckBox:hover, QCheckBox::checked { color: white }</pre>
<p>Pseudo-states can appear in combination with sub-controls. For example:</p>
<pre> QComboBox::drop-down:hover { image: url(dropdown_bright.png) }</pre>
<p>See the <a href="#list-of-pseudo-states">List of Pseudo-States</a> section below for the list of pseudo-states provided by Qt widgets.</p>
<a name="conflict-resolution"></a>
<h3>Conflict Resolution</h3>
<p>Conflicts arise when several style rules specify the same attributes with different values. Consider the following style sheet:</p>
<pre> QPushButton#okButton { color: gray }
QPushButton { color: red }</pre>
<p>Both rules match <a href="qpushbutton.html">QPushButton</a> instances called <tt>okButton</tt> and there is a conflict for the <tt>color</tt> attribute. To resolve this conflict, we must take into account the <i>specificity</i> of the selectors. In the above example, <tt>QPushButton#okButton</tt> is considered more specific than <tt>QPushButton</tt>, because it (usually) refers to a single object, not to all instances of a class.</p>
<p>Similarly, selectors with pseudo-states are more specific that ones that do not specify pseudo-states. Thus, the following style sheet specifies that a <a href="qpushbutton.html">QPushButton</a> should have white text when the mouse is hovering over it, otherwise red text:</p>
<pre> QPushButton:hover { color: white }
QPushButton { color: red }</pre>
<p>Here's a tricky one:</p>
<pre> QPushButton:hover { color: white }
QPushButton:enabled { color: red }</pre>
<p>Here, both selectors have the same specificity, so if the mouse hovers over the button while it is enabled, the second rule takes precedence. If we want the text to be white in that case, we can reorder the rules like this:</p>
<pre> QPushButton:enabled { color: red }
QPushButton:hover { color: white }</pre>
<p>Alternatively, we can make the first rule more specific:</p>
<pre> QPushButton:hover:enabled { color: white }
QPushButton:enabled { color: red }</pre>
<p>A similar issue arises in conjunction with Type Selectors. Consider the following example:</p>
<pre> QPushButton { color: red }
QAbstractButton { color: gray }</pre>
<p>Both rules apply to <a href="qpushbutton.html">QPushButton</a> instances (since <a href="qpushbutton.html">QPushButton</a> inherits <a href="qabstractbutton.html">QAbstractButton</a>) and there is a conflict for the <a href="#color-attr">color</a> attribute. Because <a href="qpushbutton.html">QPushButton</a> inherits <a href="qabstractbutton.html">QAbstractButton</a>, it might be tempting to assume that <tt>QPushButton</tt> is more specific than <tt>QAbstractButton</tt>. However, for style sheet computations, all Type Selectors have the same specificity, and the rule that appears last takes precedence. In other words, <a href="#color-attr">color</a> is set to <tt>gray</tt> for all <a href="qabstractbutton.html">QAbstractButton</a>s, including <a href="qpushbutton.html">QPushButton</a>s. If we really want <a href="qpushbutton.html">QPushButton</a>s to have red text, we can always reorder the rules.</p>
<p>For determining the specificity of a rule, Qt Style Sheets follow the <a href="http://www.w3.org/TR/REC-CSS2/cascade.html#specificity">CSS2 Specification</a>:</p>
<blockquote><p><i>A selector's specificity is calculated as follows:</i></p>
<ul>
<li><i>count the number of ID attributes in the selector (= a)</i></li>
<li><i>count the number of other attributes and pseudo-classes in the selector (= b)</i></li>
<li><i>count the number of element names in the selector (= c)</i></li>
<li><i>ignore pseudo-elements [i.e., <a href="#sub-controls">sub-controls</a>].</i></li>
</ul>
<p><i>Concatenating the three numbers a-b-c (in a number system with a large base) gives the specificity.</i></p>
<p><i>Some examples:</i></p>
<pre> * {} / * a=0 b=0 c=0 -> specificity = 0 * /
LI {} / * a=0 b=0 c=1 -> specificity = 1 * /
UL LI {} / * a=0 b=0 c=2 -> specificity = 2 * /
UL OL+LI {} / * a=0 b=0 c=3 -> specificity = 3 * /
H1 + *[REL=up]{} / * a=0 b=1 c=1 -> specificity = 11 * /
UL OL LI.red {} / * a=0 b=1 c=3 -> specificity = 13 * /
LI.red.level {} / * a=0 b=2 c=1 -> specificity = 21 * /
#x34y {} / * a=1 b=0 c=0 -> specificity = 100 * /</pre>
</blockquote>
<a name="cascading"></a>
<h3>Cascading</h3>
<p>Style sheets can be set on the <a href="qapplication.html">QApplication</a>, on parent widgets, and on child widgets. An arbitrary widget's effective style sheet is obtained by merging the style sheets set on the widget's ancestors (parent, grandparent, etc.), as well as any style sheet set on the <a href="qapplication.html">QApplication</a>.</p>
<p>When conflicts arise, the widget's own style sheet is always preferred to any inherited style sheet, irrespective of the specificity of the conflicting rules. Likewise, the parent widget's style sheet is preferred to the grandparent's, etc.</p>
<p>One consequence of this is that setting a style rule on a widget automatically gives it precedence over other rules specified in the ancestor widgets' style sheets or the <a href="qapplication.html">QApplication</a> style sheet. Consider the following example. First, we set a style sheet on the <a href="qapplication.html">QApplication</a>:</p>
<pre> qApp->setStyleSheet("QPushButton { color: white }");</pre>
<p>Then we set a style sheet on a <a href="qpushbutton.html">QPushButton</a> object:</p>
<pre> myPushButton->setStyleSheet("* { color: blue }");</pre>
<p>The style sheet on the <a href="qpushbutton.html">QPushButton</a> forces the <a href="qpushbutton.html">QPushButton</a> (and any child widget) to have blue text, in spite of the more specific rule set provided by the application-wide style sheet.</p>
<p>The result would have been the same if we had written</p>
<pre> myPushButton->setStyleSheet("color: blue");</pre>
<p>except that if the <a href="qpushbutton.html">QPushButton</a> had children (which is unlikely), the style sheet would have no impact on them.</p>
<p>Style sheet cascading is a complex topic. Refer to the <a href="http://www.w3.org/TR/CSS2/cascade.html#cascade">CSS2 Specification</a> for the gory details. Be aware that Qt currently doesn't implement <tt>!important</tt>.</p>
<a name="customizing-qt-widgets-using-style-sheets"></a>
<h2>Customizing Qt Widgets Using Style Sheets</h2>
<p>Qt Style Sheets support various attributes, pseudo-states, and sub-controls that make it possible to customize the look of widgets.</p>
<a name="list-of-stylable-widgets"></a>
<h3>List of Stylable Widgets</h3>
<p>The following table lists the Qt widgets that can be customized using style sheets:</p>
<p><table width="100%" align="center" cellpadding="2" cellspacing="1" border="0">
<thead><tr valign="top" class="qt-style"><th>Widget</th><th>How to Style</th></tr></thead>
<tr valign="top" class="odd"><td><a href="qcheckbox.html">QCheckBox</a></td><td>Supports the <a href="#box-model">box model</a>. The check indicator can be styled using the <a href="#indicator-sub">::indicator</a> sub-control. The <a href="#spacing-attr">spacing</a> attribute specifies the spacing between the check indicator and the text.</td></tr>
<tr valign="top" class="even"><td><a href="qcombobox.html">QComboBox</a></td><td>The frame around the combobox can be styled using the <a href="#box-model">box model</a>. The drop-down button can be styled using the <a href="#drop-down-sub">::drop-down</a> sub-control. The arrow mark inside the drop-down button can be styled using the <a href="#down-arrow-sub">::down-arrow</a> sub-control.</td></tr>
<tr valign="top" class="odd"><td><a href="qdialogbuttonbox.html">QDialogButtonBox</a></td><td>The layout of buttons can be altered using the <a href="#button-layout-attr">button-layout</a> attribute.</td></tr>
<tr valign="top" class="even"><td><a href="qframe.html">QFrame</a></td><td>Supports the <a href="#box-model">box model</a>. Does not support the <a href="#hover-ps">:hover</a> pseudo-state.</td></tr>
<tr valign="top" class="odd"><td><a href="qgroupbox.html">QGroupBox</a></td><td>Supports the <a href="#box-model">box model</a>. The title can be styled using the <a href="#title-sub">::title</a> sub-control. The indicator of checkable group boxes can be styled using the <a href="#indicator-sub">::indicator</a> sub-control.</td></tr>
<tr valign="top" class="even"><td><a href="qlabel.html">QLabel</a></td><td>Supports the <a href="#box-model">box model</a>. Does not support the <a href="#hover-ps">:hover</a> pseudo-state.</td></tr>
<tr valign="top" class="odd"><td><a href="qlineedit.html">QLineEdit</a></td><td>Support the <a href="#box-model">box model</a>.</td></tr>
<tr valign="top" class="even"><td><a href="qlistview.html">QListView</a></td><td>Supports the <a href="#box-model">box model</a>. The selection behavior is controlled by the <a href="#show-decoration-selected-attr">#show-decoration-selected-attr</a> attribute.</td></tr>
<tr valign="top" class="odd"><td><a href="qmenu.html">QMenu</a></td><td>Supports the <a href="#box-model">box model</a>. Individual items are styled using the <a href="#item-sub">::item</a> sub-control.</td></tr>
<tr valign="top" class="even"><td><a href="qmenubar.html">QMenuBar</a></td><td>Supports the <a href="#box-model">box model</a>. The <a href="#spacing-attr">spacing</a> attribute specifies the spacing between menu items. Individual items are styled using the <a href="#item-sub">::item</a> sub-control.</td></tr>
<tr valign="top" class="odd"><td><a href="qmessagebox.html">QMessageBox</a></td><td>The <a href="#messagebox-text-interaction-flags-attr">messagebox-text-interaction-flags</a> attribute can be used to alter the interaction with text in the message box.</td></tr>
<tr valign="top" class="even"><td><a href="qpushbutton.html">QPushButton</a></td><td>Supports the <a href="#box-model">box model</a>. The menu indicator is styled using the <a href="#menu-indicator-sub">::menu-indicator</a> sub-control. Appearance of checkable push buttons can be customized using the <a href="#on-ps">:on</a> and <a href="#off-ps">:off</a> pseudo-states.</td></tr>
<tr valign="top" class="odd"><td><a href="qradiobutton.html">QRadioButton</a></td><td>Supports the <a href="#box-model">box model</a>. The radio indicator can be styled using the {#indicator-sub}{::indicator} sub-control. The <a href="#spacing-attr">spacing</a> attribute controls the spacing between the radio indicator and the text.</td></tr>
<tr valign="top" class="even"><td><a href="qsizegrip.html">QSizeGrip</a></td><td>Supports the <a href="#width-attr">width</a>, <a href="#height-attr">height</a>, and <a href="#image-attr">image</a> attributes.</td></tr>
<tr valign="top" class="odd"><td><a href="qspinbox.html">QSpinBox</a></td><td>The frame of the spin box can be styled using the <a href="#box-model">box model</a>. The up button and arrow can be styled using the <a href="#up-button-sub">::up-button</a> and <a href="#up-arrow-sub">::up-arrow</a> sub-controls. The down button and arrow are styled using the <a href="#down-button-sub">::down-button</a> and <a href="#down-arrow-sub">::down-arrow</a> sub-controls.</td></tr>
<tr valign="top" class="even"><td><a href="qsplitter.html">QSplitter</a></td><td>Supports the <a href="#box-model">box model</a> and the <a href="#image-attr">image</a> attribute.</td></tr>
<tr valign="top" class="odd"><td><a href="qstatusbar.html">QStatusBar</a></td><td>The frame for individual items can be style using the <a href="#item-sub">item</a> sub-control.</td></tr>
<tr valign="top" class="even"><td><a href="qtableview.html">QTableView</a></td><td>Supports the <a href="#box-model">box model</a>. The color of the grid can be specified using the <a href="#gridline-color-attr">gridline-color</a> attribute.</td></tr>
<tr valign="top" class="odd"><td><a href="qtextedit.html">QTextEdit</a></td><td>Supports the <a href="#box-model">box model</a>.</td></tr>
<tr valign="top" class="even"><td><a href="qtooltip.html">QToolTip</a></td><td>Supports the <a href="#box-model">box model</a>. The <a href="#opacity-attr">opacity</a> attribute controls the opacity of the tooltip.</td></tr>
<tr valign="top" class="odd"><td><a href="qtreeview.html">QTreeView</a></td><td>Supports the <a href="#box-model">box model</a>.</td></tr>
<tr valign="top" class="even"><td><a href="qwidget.html">QWidget</a></td><td>Supports only the <a href="#background-attr">background</a> and <a href="#background-origin-attr">background-origin</a> attributes.</td></tr>
</table></p>
<a name="list-of-attributes"></a>
<h3>List of Attributes</h3>
<p>The table below lists all the attributes supported by Qt Style Sheets. Which values can be given to an attribute depend on the <a href="#list-of-attribute-types">attribute's type</a>. Unless otherwise specified, attributes below apply to all widgets. Attributes marked with an asterisk (*) are specific to Qt and have no equivalent in CSS2 or CSS3.</p>
<p><table width="100%" align="center" cellpadding="2" cellspacing="1" border="0">
<thead><tr valign="top" class="qt-style"><th>Attribute</th><th>Type</th><th>Description</th></tr></thead>
<tr valign="top" class="odd"><td><b><tt>alternate-background</tt></b> <a name="alternate-background-attr"></a></td><td><a href="#color">Color</a></td><td>The <a href="qabstractitemview.html#alternatingRowColors-prop">alternate background color</a> used in <a href="qabstractitemview.html">QAbstractItemView</a> subclasses.<p>If this attribute is not set, the default value is whatever is set for the palette's <a href="qpalette.html#ColorRole-enum">AlternateBase</a> role.</p>
<p>Example:</p>
<pre> QTreeView {
alternate-background: blue;
background: yellow;
}</pre>
<p>See also <a href="#background-attr">background</a> and <a href="#selection-background-color-attr">selection-background-color</a>.</p>
</td></tr>
<tr valign="top" class="even"><td><b><tt>background</tt></b> <a name="background-attr"></a></td><td><a href="#background">Background</a></td><td>Shorthand notation for setting the background. Equivalent to specifying <tt>background-color</tt>, <tt>background-image</tt>, <tt>background-repeat</tt>, and/or <tt>background-position</tt>.<p>This attribute is supported by <a href="qabstractitemview.html">QAbstractItemView</a> subclasses, <a href="qabstractspinbox.html">QAbstractSpinBox</a> subclasses, <a href="qcheckbox.html">QCheckBox</a>, <a href="qcombobox.html">QComboBox</a>, <a href="qdialog.html">QDialog</a>, <a href="qframe.html">QFrame</a>, <a href="qgroupbox.html">QGroupBox</a>, <a href="qlabel.html">QLabel</a>, <a href="qlineedit.html">QLineEdit</a>, <a href="qmenu.html">QMenu</a>, <a href="qmenubar.html">QMenuBar</a>, <a href="qpushbutton.html">QPushButton</a>, <a href="qradiobutton.html">QRadioButton</a>, <a href="qsplitter.html">QSplitter</a>, <a href="qtextedit.html">QTextEdit</a>, <a href="qtooltip.html">QToolTip</a>, and plain <a href="qwidget.html">QWidget</a>s.</p>
<p>For <a href="qframe.html">QFrame</a> and its subclasses, you must set the QFrame::frameStyle property to <a href="qframe.html#Shape-enum">QFrame::StyledPanel</a>; otherwise, the <tt>background</tt> attribute will not be respected.</p>
<p><a href="qabstractitemview.html">QAbstractItemView</a>, <a href="qlineedit.html">QLineEdit</a>, <a href="qmenu.html">QMenu</a>, <a href="qmenubar.html">QMenuBar</a>, and <a href="qtextedit.html">QTextEdit</a> don't support background images.</p>
<p>Example:</p>
<pre> QTextEdit { background: yellow }</pre>
<p>See also <a href="#background-origin-attr">background-origin</a>, <a href="#selection-background-color-attr">selection-background-color</a>, and <a href="#alternate-background-attr">alternate-background</a>.</p>
</td></tr>
<tr valign="top" class="odd"><td><tt>background-color</tt></td><td><a href="#color">Color</a></td><td>The background color used for the widget.<p>Examples:</p>
<pre> QLabel { background-color: yellow }
QLineEdit { background-color: rgb(255, 0, 0) }</pre>
</td></tr>
<tr valign="top" class="even"><td><tt>background-image</tt></td><td><a href="#url">Url</a></td><td>The background image used for the widget. Semi-transparent parts of the image let the <tt>background-color</tt> shine through.<p>Example:</p>
<pre> QTreeView { background-image: url(:/images/hydro.png) }</pre>
</td></tr>
<tr valign="top" class="odd"><td><tt>background-repeat</tt></td><td><a href="#repeat">Repeat</a></td><td>Whether and how the background image is repeated to fill the <tt>background-origin</tt> rectangle.<p>If this attribute is not specified, the background image is repeated in both directions (<tt>repeat</tt>).</p>
<p>Example:</p>
<pre> QTextEdit {
background: white url(:/images/ring.png);
background-repeat: repeat-y;
background-position: left;
}</pre>
</td></tr>
<tr valign="top" class="even"><td><tt>background-position</tt></td><td><a href="#alignment">Alignment</a></td><td>The alignment of the background image within the <tt>background-origin</tt> rectangle.<p>If this attribute is not specified, the alignment is <tt>top</tt> <tt>left</tt>.</p>
<p>Example:</p>
<pre> QTextEdit {
background: url(:/images/footer.png);
background-position: bottom left;
}</pre>
</td></tr>
<tr valign="top" class="odd"><td><b><tt>background-origin</tt></b> <a name="background-origin-attr"></a></td><td><a href="#origin">Origin</a></td><td>The widget's background rectangle, to use in conjunction with <tt>background-position</tt> and <tt>background-image</tt>.<p>This attribute is supported by <a href="qabstractitemview.html">QAbstractItemView</a> subclasses, <a href="qabstractspinbox.html">QAbstractSpinBox</a> subclasses, <a href="qcheckbox.html">QCheckBox</a>, <a href="qcombobox.html">QComboBox</a>, <a href="qdialog.html">QDialog</a>, <a href="qframe.html">QFrame</a>, <a href="qgroupbox.html">QGroupBox</a>, <a href="qlabel.html">QLabel</a>, <a href="qpushbutton.html">QPushButton</a>, <a href="qradiobutton.html">QRadioButton</a>, <a href="qsplitter.html">QSplitter</a>, <a href="qtextedit.html">QTextEdit</a>, <a href="qtooltip.html">QToolTip</a>, and plain <a href="qwidget.html">QWidget</a>s.</p>
<p>If this attribute is not specified, the default is <tt>padding</tt>.</p>
<p>Example:</p>
<pre> QFrame {
background-image: url(:/images/header.png);
background-position: top left;
background-origin: content;
}</pre>
<p>See also <a href="#background-attr">background</a> and <a href="#the-box-model">The Box Model</a>.</p>
</td></tr>
<tr valign="top" class="even"><td><b><tt>border</tt></b> <a name="border-attr"></a></td><td><a href="#border">Border</a></td><td>Shorthand notation for setting the widget's border. Equivalent to specifying <tt>border-color</tt>, <tt>border-style</tt>, and/or <tt>border-width</tt>.<p>This attribute is supported by <a href="qabstractitemview.html">QAbstractItemView</a> subclasses, <a href="qabstractspinbox.html">QAbstractSpinBox</a> subclasses, <a href="qcheckbox.html">QCheckBox</a>, <a href="qcombobox.html">QComboBox</a>, <a href="qdialog.html">QDialog</a>, <a href="qframe.html">QFrame</a>, <a href="qgroupbox.html">QGroupBox</a>, <a href="qlabel.html">QLabel</a>, <a href="qlineedit.html">QLineEdit</a>, <a href="qmenu.html">QMenu</a>, <a href="qmenubar.html">QMenuBar</a>, <a href="qpushbutton.html">QPushButton</a>, <a href="qradiobutton.html">QRadioButton</a>, <a href="qsplitter.html">QSplitter</a>, <a href="qtextedit.html">QTextEdit</a>, <a href="qtooltip.html">QToolTip</a>, and plain <a href="qwidget.html">QWidget</a>s.</p>
<p>Example:</p>
<pre> QLineEdit { border: 1px solid white }</pre>
</td></tr>
<tr valign="top" class="odd"><td><tt>border-top</tt></td><td><a href="#border">Border</a></td><td>Shorthand notation for setting the widget's top border. Equivalent to specifying <tt>border-top-color</tt>, <tt>border-top-style</tt>, and/or <tt>border-top-width</tt>.</td></tr>
<tr valign="top" class="even"><td><tt>border-right</tt></td><td><a href="#border">Border</a></td><td>Shorthand notation for setting the widget's right border. Equivalent to specifying <tt>border-right-color</tt>, <tt>border-right-style</tt>, and/or <tt>border-right-width</tt>.</td></tr>
<tr valign="top" class="odd"><td><tt>border-bottom</tt></td><td><a href="#border">Border</a></td><td>Shorthand notation for setting the widget's bottom border. Equivalent to specifying <tt>border-bottom-color</tt>, <tt>border-bottom-style</tt>, and/or <tt>border-bottom-width</tt>.</td></tr>
<tr valign="top" class="even"><td><tt>border-left</tt></td><td><a href="#border">Border</a></td><td>Shorthand notation for setting the widget's left border. Equivalent to specifying <tt>border-left-color</tt>, <tt>border-left-style</tt>, and/or <tt>border-left-width</tt>.</td></tr>
<tr valign="top" class="odd"><td><b><tt>border-color</tt></b> <a name="border-attrs"></a> <a name="border-color-attr"></a></td><td><a href="#box-colors">Box Colors</a></td><td>The color of all the border's edges. Equivalent to specifying <tt>border-top-color</tt>, <tt>border-right-color</tt>, <tt>border-bottom-color</tt>, and <tt>border-left-color</tt>.<p>This attribute is supported by <a href="qabstractitemview.html">QAbstractItemView</a> subclasses, <a href="qabstractspinbox.html">QAbstractSpinBox</a> subclasses, <a href="qcheckbox.html">QCheckBox</a>, <a href="qcombobox.html">QComboBox</a>, <a href="qdialog.html">QDialog</a>, <a href="qframe.html">QFrame</a>, <a href="qgroupbox.html">QGroupBox</a>, <a href="qlabel.html">QLabel</a>, <a href="qlineedit.html">QLineEdit</a>, <a href="qmenu.html">QMenu</a>, <a href="qmenubar.html">QMenuBar</a>, <a href="qpushbutton.html">QPushButton</a>, <a href="qradiobutton.html">QRadioButton</a>, <a href="qsplitter.html">QSplitter</a>, <a href="qtextedit.html">QTextEdit</a>, <a href="qtooltip.html">QToolTip</a>, and plain <a href="qwidget.html">QWidget</a>s.</p>
<p>If this attribute is not specified, it defaults to <a href="#color-attr">color</a> (i.e., the widget's foreground color).</p>
<p>Example:</p>
<pre> QLineEdit {
border-width: 1px;
border-style: solid;
border-color: white;
}</pre>
<p>See also <a href="#border-style-attr">border-style</a>, <a href="#border-width-attr">border-width</a>, <a href="#border-image-attr">border-image</a>, and <a href="#the-box-model">The Box Model</a>.</p>
</td></tr>
<tr valign="top" class="even"><td><tt>border-top-color</tt></td><td><a href="#color">Color</a></td><td>The color of the border's top edge.</td></tr>
<tr valign="top" class="odd"><td><tt>border-right-color</tt></td><td><a href="#color">Color</a></td><td>The color of the border's right edge.</td></tr>
<tr valign="top" class="even"><td><tt>border-bottom-color</tt></td><td><a href="#color">Color</a></td><td>The color of the border's bottom edge.</td></tr>
<tr valign="top" class="odd"><td><tt>border-left-color</tt></td><td><a href="#color">Color</a></td><td>The color of the border's left edge.</td></tr>
<tr valign="top" class="even"><td><b><tt>border-image</tt></b> <a name="border-image-attr"></a></td><td><a href="#border-image">Border Image</a></td><td>The image used to fill the border. The image is cut into nine parts and stretched appropriately if necessary. See <a href="#border-image">Border Image</a> for details.<p>This attribute is supported by <a href="qabstractitemview.html">QAbstractItemView</a> subclasses, <a href="qabstractspinbox.html">QAbstractSpinBox</a> subclasses, <a href="qcheckbox.html">QCheckBox</a>, <a href="qcombobox.html">QComboBox</a>, <a href="qdialog.html">QDialog</a>, <a href="qframe.html">QFrame</a>, <a href="qgroupbox.html">QGroupBox</a>, <a href="qlabel.html">QLabel</a>, <a href="qlineedit.html">QLineEdit</a>, <a href="qmenu.html">QMenu</a>, <a href="qmenubar.html">QMenuBar</a>, <a href="qpushbutton.html">QPushButton</a>, <a href="qradiobutton.html">QRadioButton</a>, <a href="qsplitter.html">QSplitter</a>, <a href="qtextedit.html">QTextEdit</a>, <a href="qtooltip.html">QToolTip</a>, and plain <a href="qwidget.html">QWidget</a>s.</p>
<p>See also <a href="#border-color-attr">border-color</a>, <a href="#border-style-attr">border-style</a>, <a href="#border-width-attr">border-width</a>, and <a href="#the-box-model">The Box Model</a>.</p>
</td></tr>
<tr valign="top" class="odd"><td><b><tt>border-radius</tt></b> <a name="border-radius-attr"></a></td><td><a href="#radius">Radius</a></td><td>The radius of the border's corners. Equivalent to specifying <tt>border-top-left-radius</tt>, <tt>border-top-right-radius</tt>, <tt>border-bottom-right-radius</tt>, and <tt>border-bottom-left-radius</tt>.<p>This attribute is supported by <a href="qabstractitemview.html">QAbstractItemView</a> subclasses, <a href="qabstractspinbox.html">QAbstractSpinBox</a> subclasses, <a href="qcheckbox.html">QCheckBox</a>, <a href="qcombobox.html">QComboBox</a>, <a href="qframe.html">QFrame</a>, <a href="qgroupbox.html">QGroupBox</a>, <a href="qlabel.html">QLabel</a>, <a href="qlineedit.html">QLineEdit</a>, <a href="qmenu.html">QMenu</a>, <a href="qmenubar.html">QMenuBar</a>, <a href="qpushbutton.html">QPushButton</a>, <a href="qradiobutton.html">QRadioButton</a>, <a href="qsplitter.html">QSplitter</a>, <a href="qtextedit.html">QTextEdit</a>, and <a href="qtooltip.html">QToolTip</a>.</p>
<p>If this attribute is not specified, it defaults to 0.</p>
<p>Example:</p>
<pre> QLineEdit {
border-width: 1px;
border-style: solid;
border-radius: 4px;
}</pre>
<p>See also <a href="#border-width-attr">border-width</a> and <a href="#the-box-model">The Box Model</a>.</p>
</td></tr>
<tr valign="top" class="even"><td><tt>border-top-left-radius</tt></td><td><a href="#radius">Radius</a></td><td>The radius of the border's top-left corner.</td></tr>
<tr valign="top" class="odd"><td><tt>border-top-right-radius</tt></td><td><a href="#radius">Radius</a></td><td>The radius of the border's top-right corner.</td></tr>
<tr valign="top" class="even"><td><tt>border-bottom-right-radius</tt></td><td><a href="#radius">Radius</a></td><td>The radius of the border's bottom-right corner. Setting this attribute to a positive value results in a rounded corner.</td></tr>
<tr valign="top" class="odd"><td><tt>border-bottom-left-radius</tt></td><td><a href="#radius">Radius</a></td><td>The radius of the border's bottom-left corner. Setting this attribute to a positive value results in a rounded corner.</td></tr>
<tr valign="top" class="even"><td><b><tt>border-style</tt></b> <a name="border-style-attr"></a></td><td><a href="#border-style">Border Style</a></td><td>The style of all the border's edges.<p>This attribute is supported by <a href="qabstractitemview.html">QAbstractItemView</a> subclasses, <a href="qabstractspinbox.html">QAbstractSpinBox</a> subclasses, <a href="qcheckbox.html">QCheckBox</a>, <a href="qcombobox.html">QComboBox</a>, <a href="qframe.html">QFrame</a>, <a href="qgroupbox.html">QGroupBox</a>, <a href="qlabel.html">QLabel</a>, <a href="qlineedit.html">QLineEdit</a>, <a href="qmenu.html">QMenu</a>, <a href="qmenubar.html">QMenuBar</a>, <a href="qpushbutton.html">QPushButton</a>, <a href="qradiobutton.html">QRadioButton</a>, <a href="qsplitter.html">QSplitter</a>, <a href="qtextedit.html">QTextEdit</a>, and <a href="qtooltip.html">QToolTip</a>.</p>
<p>If this attribute is not specified, it defaults to <tt>none</tt>.</p>
<p>Example:</p>
<pre> QLineEdit {
border-width: 1px;
border-style: solid;
border-color: blue;
}</pre>
<p>See also <a href="#border-color-attr">border-color</a>, <a href="#border-style-attr">border-style</a>, <a href="#border-image-attr">border-image</a>, and <a href="#the-box-model">The Box Model</a>.</p>
</td></tr>
<tr valign="top" class="odd"><td><tt>border-top-style</tt></td><td><a href="#border-style">Border Style</a></td><td>The style of the border's top edge.</td></tr>
<tr valign="top" class="even"><td><tt>border-right-style</tt></td><td><a href="#border-style">Border Style</a></td><td>The style of the border's right edge/</td></tr>
<tr valign="top" class="odd"><td><tt>border-bottom-style</tt></td><td><a href="#border-style">Border Style</a></td><td>The style of the border's bottom edge.</td></tr>
<tr valign="top" class="even"><td><tt>border-left-style</tt></td><td><a href="#border-style">Border Style</a></td><td>The style of the border's left edge.</td></tr>
<tr valign="top" class="odd"><td><b><tt>border-width</tt></b> <a name="border-width-attr"></a></td><td><a href="#box-lengths">Box Lengths</a></td><td>The width of the border. Equivalent to setting <tt>border-top-width</tt>, <tt>border-right-width</tt>, <tt>border-bottom-width</tt>, and <tt>border-left-width</tt>.<p>This attribute is supported by <a href="qabstractitemview.html">QAbstractItemView</a> subclasses, <a href="qabstractspinbox.html">QAbstractSpinBox</a> subclasses, <a href="qcheckbox.html">QCheckBox</a>, <a href="qcombobox.html">QComboBox</a>, <a href="qframe.html">QFrame</a>, <a href="qgroupbox.html">QGroupBox</a>, <a href="qlabel.html">QLabel</a>, <a href="qlineedit.html">QLineEdit</a>, <a href="qmenu.html">QMenu</a>, <a href="qmenubar.html">QMenuBar</a>, <a href="qpushbutton.html">QPushButton</a>, <a href="qradiobutton.html">QRadioButton</a>, <a href="qsplitter.html">QSplitter</a>, <a href="qtextedit.html">QTextEdit</a>, and <a href="qtooltip.html">QToolTip</a>.</p>
<p>Example:</p>
<pre> QLineEdit {
border-width: 2px;
border-style: solid;
border-color: darkblue;
}</pre>
<p>See also <a href="#border-color-attr">border-color</a>, <a href="#border-radius-attr">border-radius</a>, <a href="#border-style-attr">border-style</a>, <a href="#border-image-attr">border-image</a>, and <a href="#the-box-model">The Box Model</a>.</p>
</td></tr>
<tr valign="top" class="even"><td><tt>border-top-width</tt></td><td><a href="#length">Length</a></td><td>The width of the border's top edge.</td></tr>
<tr valign="top" class="odd"><td><tt>border-right-width</tt></td><td><a href="#length">Length</a></td><td>The width of the border's right edge.</td></tr>
<tr valign="top" class="even"><td><tt>border-bottom-width</tt></td><td><a href="#length">Length</a></td><td>The width of the border's bottom edge.</td></tr>
<tr valign="top" class="odd"><td><tt>border-left-width</tt></td><td><a href="#length">Length</a></td><td>The width of the border's left edge.</td></tr>
<tr valign="top" class="even"><td><b><tt>bottom</tt></b> <a name="bottom-attr"></a></td><td><a href="#length">Length</a></td><td>If <a href="#position-attr">position</a> is <tt>relative</tt> (the default), moves a <a href="#sub-controls">sub-control</a> by a certain offset up; specifying <tt>bottom: <i>y</i></tt> is then equivalent to specifying <tt><a href="#top-attr">top</a>: -<i>y</i></tt>.<p>If <a href="#position-attr">position</a> is <tt>absolute</tt>, the <tt>bottom</tt> attribute specifies the sub-control's bottom edge in relation to the parent's bottom edge (see also <a href="#subcontrol-origin-attr">subcontrol-origin</a>).</p>
<p>Example:</p>
<pre> QSpinBox::down-button { bottom: 2px }</pre>
<p>See also <a href="#left-attr">left</a>, <a href="#right-attr">right</a>, and <a href="#top-attr">top</a>.</p>
</td></tr>
<tr valign="top" class="odd"><td><b><tt>button-layout</tt></b>* <a name="button-layout-attr"></a></td><td><a href="#number">Number</a></td><td>The layout of buttons in a <a href="qdialogbuttonbox.html">QDialogButtonBox</a> or a <a href="qmessagebox.html">QMessageBox</a>. The possible values are 0 (<a href="qdialogbuttonbox.html#ButtonLayout-enum">WinLayout</a>), 1 (<a href="qdialogbuttonbox.html#ButtonLayout-enum">MacLayout</a>), 2 (<a href="qdialogbuttonbox.html#ButtonLayout-enum">KdeLayout</a>), and 3 (<a href="qdialogbuttonbox.html#ButtonLayout-enum">GnomeLayout</a>).<p>If this attribute is not specified, it defaults to the value specified by the current style for the <a href="qstyle.html#StyleHint-enum">SH_DialogButtonLayout</a> style hint.</p>
<p>Example:</p>
<pre> * { button-layout: 2px }</pre>
</td></tr>
<tr valign="top" class="even"><td><b><tt>color</tt></b> <a name="color-attr"></a></td><td><a href="#color">Color</a></td><td>The color used to render text.<p>This attribute is supported by all widgets that respect the <a href="qwidget.html#palette-prop">QWidget::palette</a>.</p>
<p>If this attribute is not set, the default is whatever is set for in the widget's palette for the QWidget::foregroundRole (typically black).</p>
<p>Example:</p>
<pre> QPushButton { color: red }</pre>
<p>See also <a href="#background-attr">background</a> and <a href="#selection-color-attr">selection-color</a>.</p>
</td></tr>
<tr valign="top" class="odd"><td><b><tt>etch-disabled-text</tt></b>*</td><td><a href="#boolean">Boolean</a></td><td>Whether disabled text is drawn etched.<p>If this attribute is not specified, it defaults to the value specified by the current style for the <a href="qstyle.html#StyleHint-enum">SH_EtchDisabledText</a> style hint.</p>
<p>Example:</p>
<pre> * { etch-disabled-text: 1px }</pre>
</td></tr>
<tr valign="top" class="even"><td><b><tt>font</tt></b> <a name="font-attr"></a></td><td><a href="#font">Font</a></td><td>Shorthand notation for setting the text's font. Equivalent to specifying <tt>font-family</tt>, <tt>font-size</tt>, <tt>font-style</tt>, and/or <tt>font-weight</tt>.<p>This attribute is supported by all widgets that respect the <a href="qwidget.html#font-prop">QWidget::font</a>.</p>
<p>If this attribute is not set, the default is the <a href="qwidget.html#font-prop">QWidget::font</a>.</p>
<p>Example:</p>
<pre> QCheckBox { font: bold italic large "Times New Roman" }</pre>
</td></tr>
<tr valign="top" class="odd"><td><tt>font-family</tt></td><td>String</td><td>The font family.<p>Example:</p>
<pre> QCheckBox { font-family: "New Century Schoolbook" }</pre>
</td></tr>
<tr valign="top" class="even"><td><tt>font-size</tt></td><td><a href="#font-size">Font Size</a></td><td>The font size.<p>Example:</p>
<pre> QTextEdit { font-size: 12px }</pre>
</td></tr>
<tr valign="top" class="odd"><td><tt>font-style</tt></td><td><a href="#font-style">Font Style</a></td><td>The font style.<p>Example:</p>
<pre> QTextEdit { font-style: italic }</pre>
</td></tr>
<tr valign="top" class="even"><td><tt>font-weight</tt></td><td><a href="#font-weight">Font Weight</a></td><td>The weight of the font.</td></tr>
<tr valign="top" class="odd"><td><b><tt>gridline-color</tt></b>* <a name="gridline-color-attr"></a></td><td><a href="#color">Color</a></td><td>The color of the grid line in a <a href="qtableview.html">QTableView</a>.<p>If this attribute is not specified, it defaults to the value specified by the current style for the <a href="qstyle.html#StyleHint-enum">SH_Table_GridLineColor</a> style hint.</p>
<p>Example:</p>
<pre> * { gridline-color: gray }</pre>
</td></tr>
<tr valign="top" class="even"><td><b><tt>height</tt></b> <a name="height-attr"></a></td><td><a href="#length">Length</a></td><td>The height of a <a href="#sub-controls">sub-control</a>.<p>If this attribute is not specified, it defaults to a value that depends on the sub-control and on the current style.</p>
<p>Example:</p>
<pre> QSpinBox::down-button { height: 10px }</pre>
<p>See also <a href="#width-attr">width</a>.</p>
</td></tr>
<tr valign="top" class="odd"><td><b><tt>image</tt></b>* <a name="image-attr"></a></td><td><a href="#url">Url</a></td><td>The image that is drawn at the center of a <a href="#sub-controls">sub-control</a>.<p>Example:</p>
<pre> QSpinBox::down-button { image: url(:/images/spindown.png) }</pre>
</td></tr>
<tr valign="top" class="even"><td><b><tt>left</tt></b> <a name="left-attr"></a></td><td><a href="#length">Length</a></td><td>If <a href="#position-attr">position</a> is <tt>relative</tt> (the default), moves a <a href="#sub-controls">sub-control</a> by a certain offset to the right.<p>If <a href="#position-attr">position</a> is <tt>absolute</tt>, the <tt>left</tt> attribute specifies the sub-control's left edge in relation to the parent's left edge (see also <a href="#subcontrol-origin-attr">subcontrol-origin</a>).</p>
<p>If this attribute is not specified, it defaults to <tt>0</tt>.</p>
<p>Example:</p>
<pre> QSpinBox::down-button { left: 2px }</pre>
<p>See also <a href="#right-attr">right</a>, <a href="#top-attr">top</a>, and <a href="#bottom-attr">bottom</a>.</p>
</td></tr>
<tr valign="top" class="odd"><td><b><tt>lineedit-password-</tt> <br /> <tt>character</tt></b>*</td><td><a href="#number">Number</a></td><td>The <a href="qlineedit.html">QLineEdit</a> password character as a Unicode number.<p>If this attribute is not specified, it defaults to the value specified by the current style for the <a href="qstyle.html#StyleHint-enum">SH_LineEdit_PasswordCharacter</a> style hint.</p>
<p>Example:</p>
<pre> * { lineedit-password-character: 9679 }</pre>
</td></tr>
<tr valign="top" class="even"><td><b><tt>margin</tt></b> <a name="margin-attr"></a></td><td><a href="#box-lengths">Box Lengths</a></td><td>The widget's margins. Equivalent to specifying <tt>margin-top</tt>, <tt>margin-right</tt>, <tt>margin-bottom</tt>, and <tt>margin-left</tt>.<p>This attribute is supported by <a href="qabstractitemview.html">QAbstractItemView</a> subclasses, <a href="qabstractspinbox.html">QAbstractSpinBox</a> subclasses, <a href="qcheckbox.html">QCheckBox</a>, <a href="qcombobox.html">QComboBox</a>, <a href="qframe.html">QFrame</a>, <a href="qgroupbox.html">QGroupBox</a>, <a href="qlabel.html">QLabel</a>, <a href="qlineedit.html">QLineEdit</a>, <a href="qmenu.html">QMenu</a>, <a href="qmenubar.html">QMenuBar</a>, <a href="qpushbutton.html">QPushButton</a>, <a href="qradiobutton.html">QRadioButton</a>, <a href="qsplitter.html">QSplitter</a>, <a href="qtextedit.html">QTextEdit</a>, and <a href="qtooltip.html">QToolTip</a>.</p>
<p>If this attribute is not specified, it defaults to <tt>0</tt>.</p>
<p>Example:</p>
<pre> QLineEdit { margin: 2px }</pre>
<p>See also <a href="#padding-attr">padding</a>, <a href="#spacing-attr">spacing</a>, and <a href="#the-box-model">The Box Model</a>.</p>
</td></tr>
<tr valign="top" class="odd"><td><tt>margin-top</tt></td><td><a href="#length">Length</a></td><td>The widget's top margin.</td></tr>
<tr valign="top" class="even"><td><tt>margin-right</tt></td><td><a href="#length">Length</a></td><td>The widget's right margin.</td></tr>
<tr valign="top" class="odd"><td><tt>margin-bottom</tt></td><td><a href="#length">Length</a></td><td>The widget's bottom margin.</td></tr>
<tr valign="top" class="even"><td><tt>margin-left</tt></td><td><a href="#length">Length</a></td><td>The widget's left margin.</td></tr>
<tr valign="top" class="odd"><td><b><tt>messagebox-text-</tt> <a name="messagebox-text-interaction-flags-attr"></a> <br /> <tt>interaction-flags</tt></b>*</td><td><a href="#number">Number</a></td><td>The interaction behavior for text in a message box. Possible values are based on <a href="qt.html#TextInteractionFlag-enum">Qt::TextInteractionFlags</a>.<p>If this attribute is not specified, it defaults to the value specified by the current style for the <a href="qstyle.html#StyleHint-enum">SH_MessageBox_TextInteractionFlags</a> style hint.</p>
<p>Example:</p>
<pre> QMessageBox { messagebox-text-interaction-flags: 5 }</pre>
</td></tr>
<tr valign="top" class="even"><td><b><tt>min-height</tt></b> <a name="min-height-attr"></a></td><td><a href="#length">Length</a></td><td>The widget's minimum height.<p>This attribute is supported by <a href="qabstractitemview.html">QAbstractItemView</a> subclasses, <a href="qabstractspinbox.html">QAbstractSpinBox</a> subclasses, <a href="qcheckbox.html">QCheckBox</a>, <a href="qcombobox.html">QComboBox</a>, <a href="qframe.html">QFrame</a>, <a href="qgroupbox.html">QGroupBox</a>, <a href="qlabel.html">QLabel</a>, <a href="qlineedit.html">QLineEdit</a>, <a href="qmenu.html">QMenu</a>, <a href="qmenubar.html">QMenuBar</a>, <a href="qpushbutton.html">QPushButton</a>, <a href="qradiobutton.html">QRadioButton</a>, <a href="qsizegrip.html">QSizeGrip</a>, <a href="qspinbox.html">QSpinBox</a>, <a href="qsplitter.html">QSplitter</a>, <a href="qstatusbar.html">QStatusBar</a>, <a href="qtextedit.html">QTextEdit</a>, and <a href="qtooltip.html">QToolTip</a>.</p>
<p>If this attribute is not specified, the minimum height is derived based on the widget's contents and the style.</p>
<p>Example:</p>
<pre> QComboBox { min-height: 24px }</pre>
<p>See also <a href="#min-width-attr">min-width</a>.</p>
</td></tr>
<tr valign="top" class="odd"><td><b><tt>min-width</tt></b> <a name="min-width-attr"></a></td><td><a href="#length">Length</a></td><td>The widget's minimum width.<p>This attribute is supported by <a href="qabstractitemview.html">QAbstractItemView</a> subclasses, <a href="qabstractspinbox.html">QAbstractSpinBox</a> subclasses, <a href="qcheckbox.html">QCheckBox</a>, <a href="qcombobox.html">QComboBox</a>, <a href="qframe.html">QFrame</a>, <a href="qgroupbox.html">QGroupBox</a>, <a href="qlabel.html">QLabel</a>, <a href="qlineedit.html">QLineEdit</a>, <a href="qmenu.html">QMenu</a>, <a href="qmenubar.html">QMenuBar</a>, <a href="qpushbutton.html">QPushButton</a>, <a href="qradiobutton.html">QRadioButton</a>, <a href="qsizegrip.html">QSizeGrip</a>, <a href="qspinbox.html">QSpinBox</a>, <a href="qsplitter.html">QSplitter</a>, <a href="qstatusbar.html">QStatusBar</a>, <a href="qtextedit.html">QTextEdit</a>, and <a href="qtooltip.html">QToolTip</a>.</p>
<p>If this attribute is not specified, the minimum width is derived based on the widget's contents and the style.</p>
<p>Example:</p>
<pre> QComboBox { min-width: 72px }</pre>
<p>See also <a href="#min-height-attr">min-height</a>.</p>
</td></tr>
<tr valign="top" class="even"><td><b><tt>opacity</tt></b>* <a name="opacity-attr"></a></td><td><a href="#number">Number</a></td><td>The opacity for a widget. Possible values are from 0 (transparent) to 255 (opaque). For the moment, this is only supported for <a href="qtooltip.html">tooltips</a>.<p>If this attribute is not specified, it defaults to the value specified by the current style for the <a href="qstyle.html#StyleHint-enum">SH_ToolTipLabel_Opacity</a> style hint.</p>
<p>Example:</p>
<pre> QToolTip { opacity: 223 }</pre>
</td></tr>
<tr valign="top" class="odd"><td><b><tt>padding</tt></b> <a name="padding-attr"></a></td><td><a href="#box-lengths">Box Lengths</a></td><td>The widget's padding. Equivalent to specifying <tt>padding-top</tt>, <tt>padding-right</tt>, <tt>padding-bottom</tt>, and <tt>padding-left</tt>.<p>This attribute is supported by <a href="qabstractitemview.html">QAbstractItemView</a> subclasses, <a href="qabstractspinbox.html">QAbstractSpinBox</a> subclasses, <a href="qcheckbox.html">QCheckBox</a>, <a href="qcombobox.html">QComboBox</a>, <a href="qframe.html">QFrame</a>, <a href="qgroupbox.html">QGroupBox</a>, <a href="qlabel.html">QLabel</a>, <a href="qlineedit.html">QLineEdit</a>, <a href="qmenu.html">QMenu</a>, <a href="qmenubar.html">QMenuBar</a>, <a href="qpushbutton.html">QPushButton</a>, <a href="qradiobutton.html">QRadioButton</a>, <a href="qsplitter.html">QSplitter</a>, <a href="qtextedit.html">QTextEdit</a>, and <a href="qtooltip.html">QToolTip</a>.</p>
<p>If this attribute is not specified, it defaults to <tt>0</tt>.</p>
<p>Example:</p>
<pre> QLineEdit { padding: 3px }</pre>
<p>See also <a href="#margin-attr">margin</a>, <a href="#spacing-attr">spacing</a>, and <a href="#the-box-model">The Box Model</a>.</p>
</td></tr>
<tr valign="top" class="even"><td><tt>padding-top</tt></td><td><a href="#length">Length</a></td><td>The widget's top padding.</td></tr>
<tr valign="top" class="odd"><td><tt>padding-right</tt></td><td><a href="#length">Length</a></td><td>The widget's right padding.</td></tr>
<tr valign="top" class="even"><td><tt>padding-bottom</tt></td><td><a href="#length">Length</a></td><td>The widget's bottom padding.</td></tr>
<tr valign="top" class="odd"><td><tt>padding-left</tt></td><td><a href="#length">Length</a></td><td>The widget's left padding.</td></tr>
<tr valign="top" class="even"><td><b><tt>position</tt></b> <a name="position-attr"></a></td><td><tt>relative</tt> <br /> | <tt>absolute</tt></td><td>Whether offsets specified using <a href="#left-attr">left</a>, <a href="#right-attr">right</a>, <a href="#top-attr">top</a>, and <a href="#bottom-attr">bottom</a> are relative or absolute coordinates.<p>If this attribute is not specified, it defaults to <tt>relative</tt>.</p>
</td></tr>
<tr valign="top" class="odd"><td><b><tt>right</tt></b> <a name="right-attr"></a></td><td><a href="#length">Length</a></td><td>If <a href="#position-attr">position</a> is <tt>relative</tt> (the default), moves a <a href="#sub-controls">sub-control</a> by a certain offset to the left; specifying <tt>right: <i>x</i></tt> is then equivalent to specifying <tt><a href="#left-attr">left</a>: -<i>x</i></tt>.<p>If <a href="#position-attr">position</a> is <tt>absolute</tt>, the <tt>right</tt> attribute specifies the sub-control's right edge in relation to the parent's right edge (see also <a href="#subcontrol-origin-attr">subcontrol-origin</a>).</p>
<p>Example:</p>
<pre> QSpinBox::down-button { right: 2px }</pre>
<p>See also <a href="#left-attr">left</a>, <a href="#top-attr">top</a>, and <a href="#bottom-attr">bottom</a>.</p>
</td></tr>
<tr valign="top" class="even"><td><b><tt>selection-background-color</tt></b>* <a name="selection-background-color-attr"></a></td><td><a href="#color">Color</a></td><td>The background of selected text or items.<p>This attribute is supported by all widgets that respect the <a href="qwidget.html#palette-prop">QWidget::palette</a> and that show selection text.</p>
<p>If this attribute is not set, the default value is whatever is set for the palette's <a href="qpalette.html#ColorRole-enum">Highlight</a> role.</p>
<p>Example:</p>
<pre> QTextEdit { selection-background-color: darkblue }</pre>
<p>See also <a href="#selection-color-attr">selection-color</a> and <a href="#background-attr">background</a>.</p>
</td></tr>
<tr valign="top" class="odd"><td><b><tt>selection-color</tt></b>* <a name="selection-color-attr"></a></td><td><a href="#color">Color</a></td><td>The foreground of selected text or items.<p>This attribute is supported by all widgets that respect the <a href="qwidget.html#palette-prop">QWidget::palette</a> and that show selection text.</p>
<p>If this attribute is not set, the default value is whatever is set for the palette's <a href="qpalette.html#ColorRole-enum">HighlightedText</a> role.</p>
<p>Example:</p>
<pre> QTextEdit { selection-color: white }</pre>
<p>See also <a href="#selection-background-color-attr">selection-background-color</a> and <a href="#color-attr">color</a>.</p>
</td></tr>
<tr valign="top" class="even"><td><b><tt>show-decoration-</tt> <a name="show-decoration-selected-attr"></a> <br /> <tt>selected</tt></b>*</td><td><a href="#boolean">Boolean</a></td><td>Controls whether selections in a <a href="qlistview.html">QListView</a> cover the entire row or just the extent of the text.<p>If this attribute is not specified, it defaults to the value specified by the current style for the <a href="qstyle.html#StyleHint-enum">SH_ItemView_ShowDecorationSelected</a> style hint.</p>
<p>Example:</p>
<pre> * { show-decoration-selected: 1 }</pre>
</td></tr>
<tr valign="top" class="odd"><td><b><tt>spacing</tt></b>* <a name="spacing-attr"></a></td><td><a href="#length">Length</a></td><td>Internal spacing in the widget.<p>This attribute is supported by <a href="qcheckbox.html">QCheckBox</a>, checkable <a href="qgroupbox.html">QGroupBox</a>es, <a href="qmenubar.html">QMenuBar</a>, and <a href="qradiobutton.html">QRadioButton</a>.</p>
<p>If this attribute is not specified, the default value depends on the widget and on the current style.</p>
<p>Example:</p>
<pre> QMenuBar { spacing: 10 }</pre>
<p>See also <a href="#padding-attr">padding</a> and <a href="#margin-attr">margin</a>.</p>
</td></tr>
<tr valign="top" class="even"><td><b><tt>subcontrol-origin</tt></b>* <a name="subcontrol-origin-attr"></a></td><td><a href="#origin">Origin</a></td><td>The origin rectangle of the <a href="#sub-controls">sub-control</a> within the parent element.<p>If this attribute is not specified, the default is <tt>padding</tt>.</p>
<p>Example:</p>
<pre> QSpinBox::up-button {
image: url(:/images/spinup.png);
subcontrol-origin: content;
subcontrol-position: right top;
}</pre>
<p>See also <a href="#subcontrol-position-attr">subcontrol-position</a>.</p>
</td></tr>
<tr valign="top" class="odd"><td><b><tt>subcontrol-position</tt></b>* <a name="subcontrol-position-attr"></a></td><td><a href="#alignment">Alignment</a></td><td>The alignment of the <a href="#sub-controls">sub-control</a> within the origin rectangle specified by <a href="#subcontrol-origin-attr">subcontrol-origin</a>.<p>If this attribute is not specified, it defaults to a value that depends on the sub-control.</p>
<p>Example:</p>
<pre> QSpinBox::down-button {
image: url(:/images/spindown.png);
subcontrol-origin: padding;
subcontrol-position: right bottom;
}</pre>
<p>See also <a href="#subcontrol-origin-attr">subcontrol-origin</a>.</p>
</td></tr>
<tr valign="top" class="even"><td><b><tt>top</tt></b> <a name="top-attr"></a></td><td><a href="#length">Length</a></td><td>If <a href="#position-attr">position</a> is <tt>relative</tt> (the default), moves a <a href="#sub-controls">sub-control</a> by a certain offset down.<p>If <a href="#position-attr">position</a> is <tt>absolute</tt>, the <tt>top</tt> attribute specifies the sub-control's top edge in relation to the parent's top edge (see also <a href="#subcontrol-origin-attr">subcontrol-origin</a>).</p>
<p>If this attribute is not specified, it defaults to <tt>0</tt>.</p>
<p>Example:</p>
<pre> QSpinBox::up-button { top: 2px }</pre>
<p>See also <a href="#left-attr">left</a>, <a href="#right-attr">right</a>, and <a href="#bottom-attr">bottom</a>.</p>
</td></tr>
<tr valign="top" class="odd"><td><b><tt>width</tt></b> <a name="width-attr"></a></td><td><a href="#length">Length</a></td><td>The width of a <a href="#sub-controls">sub-control</a>.<p>If this attribute is not specified, it defaults to a value that depends on the sub-control and on the current style.</p>
<p>Example:</p>
<pre> QSpinBox::up-button { width: 12px }</pre>
<p>See also <a href="#height-attr">height</a>.</p>
</td></tr>
</table></p>
<a name="list-of-attribute-types"></a>
<h3>List of Attribute Types</h3>
<p>The following table summarizes the syntax and meaning of the different attribute types.</p>
<p><table width="100%" align="center" cellpadding="2" cellspacing="1" border="0">
<thead><tr valign="top" class="qt-style"><th>Type</th><th>Syntax</th><th>Desciption</th></tr></thead>
<tr valign="top" class="odd"><td><b>Alignment</b> <a name="alignment"></a></td><td>{ <tt>top</tt> <br /> | <tt>bottom</tt> <br /> | <tt>left</tt> <br /> | <tt>right</tt> <br /> | <tt>center</tt> }*</td><td>Horizontal and/or vertical alignment.<p>Example:</p>
<pre> QTextEdit { background-position: bottom center }</pre>
</td></tr>
<tr valign="top" class="even"><td><b>Background</b> <a name="background"></a></td><td>{ <a href="#color">Color</a> <br /> | <a href="#url">Url</a> <br /> | <a href="#repeat">Repeat</a> <br /> | <a href="#alignment">Alignment</a> }*</td><td>A sequence of zero or more occurrences of <a href="#color">Color</a>, <a href="#url">Url</a>, <a href="#repeat">Repeat</a>, and <a href="#alignment">Alignment</a>.</td></tr>
<tr valign="top" class="odd"><td><b>Boolean</b> <a name="boolean"></a></td><td>0 | 1</td><td>True (<tt>1</tt>) or false (<tt>0</tt>).<p>Example:</p>
<pre> QDialog { etch-disabled-text: 1 }</pre>
</td></tr>
<tr valign="top" class="even"><td><b>Border</b> <a name="border"></a></td><td>{ <a href="#border-style">Border Style</a> <br /> | <a href="#length">Length</a> <br /> | <a href="#color">Color</a> }*</td><td>Shorthand border attribute.</td></tr>
<tr valign="top" class="odd"><td><b>Border <a name="border-image"></a> Image</b></td><td><tt>none</tt> <br /> | <a href="#url">Url</a> <a href="#number">Number</a>{4} <br /> (<tt>stretch</tt> | <tt>repeat</tt>){0,2}</td><td>A border image is an image that is composed of nine parts (top left, top center, top right, center left, center, center right, bottom left, bottom center, and bottom right). When a border of a certain size is required, the corner parts are used as is, and the top, right, bottom, and left parts are stretched or repeated to produce a border with the desired size.<p>See the <a href="http://www.w3.org/TR/css3-background/#the-border-image">CSS3 Draft Specification</a> for details.</p>
</td></tr>
<tr valign="top" class="even"><td><b>Border <a name="border-style"></a> Style</b></td><td><tt>dashed</tt> <br /> | <tt>dot-dash</tt> <br /> | <tt>dot-dot-dash</tt> <br /> | <tt>dotted</tt> <br /> | <tt>double</tt> <br /> | <tt>groove</tt> <br /> | <tt>inset</tt> <br /> | <tt>outset</tt> <br /> | <tt>ridge</tt> <br /> | <tt>solid</tt> <br /> | <tt>none</tt></td><td>Specifies the pattern used to draw a border. See the <a href="http://www.w3.org/TR/css3-background/#border-style">CSS3 Draft Specification</a> for details.</td></tr>
<tr valign="top" class="odd"><td><b>Box <a name="box-colors"></a> Colors</b></td><td><a href="#color">Color</a>{1,4}</td><td>One to four occurrences of <a href="#color">Color</a>, specifying the top, right, bottom, and left edges of a box, respectively. If the left color is not specified, it is taken to be the same as the right color. If the bottom color is not specified, is it taken to be the same as the top color. If the right color is not specified, it is taken to be the same as the top color.<p>Example:</p>
<pre> QLabel { border-color: red } / * red red red red * /
QLabel { border-color: red blue } / * red blue red blue * /
QLabel { border-color: red blue green } / * red blue green blue * /
QLabel { border-color: red blue green yellow } / * red blue green yellow * /</pre>
</td></tr>
<tr valign="top" class="even"><td><b>Box <a name="box-lengths"></a> Lengths</b></td><td><a href="#length">Length</a>{1,4}</td><td>One to four occurrences of <a href="#length">Length</a>, specifying the top, right, bottom, and left edges of a box, respectively. If the left length is not specified, it is taken to be the same as the right length. If the bottom length is not specified, is it taken to be the same as the top length. If the right length is not specified, it is taken to be the same as the top length.<p>Examples:</p>
<pre> QLabel { border-width: 1px } / * 1px 1px 1px 1px * /
QLabel { border-width: 1px 2px } / * 1px 2px 1px 2px * /
QLabel { border-width: 1px 2px 3px } / * 1px 2px 3px 2px * /
QLabel { border-width: 1px 2px 3px 4px } / * 1px 2px 3px 4px * /</pre>
</td></tr>
<tr valign="top" class="odd"><td><b>Color</b> <a name="color"></a></td><td><tt>rgb(<i>r</i>, <i>g</i>, <i>b</i>)</tt> <br /> | <tt>#<i>rrggbb</i></tt> <br /> | <tt>#<i>aarrggbb</i></tt> <br /> | <a href="qcolor.html#setNamedColor">Color Name</a></td><td>Specifies a color as RGB (red, green, blue) or ARGB (alpha, red, green, blue). The <tt>rgb()</tt> syntax can be used with integer values between 0 and 255, or with percentages.<p>Examples:</p>
<pre> QLabel { border-color: red } / * opaque red * /
QLabel { border-color: #FF0000 } / * opaque red * /
QLabel { border-color: #3FFF0000 } / * 75% transparent red * /
QLabel { border-color: rgb(255, 0, 0) } / * opaque red * /
QLabel { border-color: rgb(100%, 0%, 0%) } / * opaque red * /</pre>
</td></tr>
<tr valign="top" class="even"><td><b>Font</b> <a name="font"></a></td><td>(<a href="#font-style">Font Style</a> | <a href="#font-weight">Font Weight</a>){0,2} <a href="#font-size">Font Size</a> String</td><td>Shorthand font attribute.</td></tr>
<tr valign="top" class="odd"><td><b>Font <a name="font-size"></a> Size</b></td><td><tt>xx-small</tt> <br /> | <tt>x-small</tt> <br /> | <tt>small</tt> <br /> | <tt>medium</tt> <br /> | <tt>large</tt> <br /> | <tt>x-large</tt> <br /> | <tt>xx-large</tt> <br /> | <tt>larger</tt> <br /> | <tt>smaller</tt> <br /> | <a href="#length">Length</a></td><td>The size of a font.</td></tr>
<tr valign="top" class="even"><td><b>Font <a name="font-style"></a> Style</b></td><td><tt>normal</tt> <br /> | <tt>italic</tt> <br /> | <tt>oblique</tt></td><td>The style of a font.</td></tr>
<tr valign="top" class="odd"><td><b>Font <a name="font-weight"></a> Weight</b></td><td><tt>normal</tt> <br /> | <tt>bold</tt> <br /> | <tt>100</tt> <br /> | <tt>200</tt> <br /> ... <br /> | <tt>900</tt></td><td>The weight of a font.</td></tr>
<tr valign="top" class="even"><td><b>Length</b> <a name="length"></a></td><td><a href="#number">Number</a> (<tt>px</tt> | <tt>em</tt> | <tt>ex</tt>)?</td><td>A number followed by a measurement unit. The supported units are:<ul>
<li><tt>px</tt>: pixels (the default when no units are specified)</li>
<li><tt>em</tt>: the em width of the font (i.e., the width of 'M')</li>
<li><tt>ex</tt>: the ex width of the font (i.e., the height of 'x')</li>
</ul>
</td></tr>
<tr valign="top" class="odd"><td><b>Number</b> <a name="number"></a></td><td>A decimal integer or a real number</td><td>Examples: <tt>0</tt>, <tt>18</tt>, <tt>+127</tt>, <tt>-255</tt>, <tt>12.34</tt>, <tt>-.5</tt>, <tt>0009</tt>.</td></tr>
<tr valign="top" class="even"><td><b>Origin</b> <a name="origin"></a></td><td><tt>margin</tt> <br /> | <tt>border</tt> <br /> | <tt>padding</tt> <br /> | <tt>content</tt></td><td>Indicates which of four rectangles to use.<ul>
<li><tt>margin</tt>: The margin rectangle. The margin falls outside the border.</li>
<li><tt>border</tt>: The border rectangle. This is where any border is drawn.</li>
<li><tt>padding</tt>: The padding rectangle. Unlike the margins, padding is located inside the border.</li>
<li><tt>content</tt>: The content rectangle. This specifies where the actual contents go, excluding any padding, border, or margin.</li>
</ul>
<p>See also <a href="#the-box-model">The Box Model</a>.</p>
</td></tr>
<tr valign="top" class="odd"><td><b>Radius</b> <a name="radius"></a></td><td><a href="#length">Length</a>{1, 2}</td><td>One or two occurrences of <a href="#length">Length</a>. If only one length is specified, it is used as the radius of the quarter circle defining the corner. If two lengths are specified, the first length is the horizontal radius of a quarter ellipse, whereas the second length is the vertical radius.</td></tr>
<tr valign="top" class="even"><td><b>Repeat</b> <a name="repeat"></a></td><td><tt>repeat-x</tt> <br /> | <tt>repeat-y</tt> <br /> | <tt>repeat</tt> <br /> | <tt>no-repeat</tt></td><td>A value indicating the nature of repetition.<ul>
<li><tt>repeat-x</tt>: Repeat horizontally.</li>
<li><tt>repeat-y</tt>: Repeat vertically.</li>
<li><tt>repeat</tt>: Repeat horizontally and vertically.</li>
<li><tt>no-repeat</tt>: Don't repeat.</li>
</ul>
</td></tr>
<tr valign="top" class="odd"><td><b>Url</b> <a name="url"></a></td><td><tt>url(<i>filename</i>)</tt></td><td><tt><i>filename</i></tt> is the name of a file on the local disk or stored using <a href="resources.html">the Qt Resource System</a>. Setting an image implicitly sets the width and height of the element.</td></tr>
</table></p>
<a name="list-of-pseudo-states"></a>
<h3>List of Pseudo-States</h3>
<p>The following pseudo-states are supported:</p>
<p><table width="100%" align="center" cellpadding="2" cellspacing="1" border="0">
<thead><tr valign="top" class="qt-style"><th>Pseudo-State</th><th>Description</th></tr></thead>
<tr valign="top" class="odd"><td><tt>:checked</tt> <a name="checked-ps"></a></td><td>The button widget is <a href="qabstractbutton.html#checked-prop">checked</a>.</td></tr>
<tr valign="top" class="even"><td><tt>:disabled</tt> <a name="disabled-ps"></a></td><td>The widget is <a href="qwidget.html#enabled-prop">disabled</a>.</td></tr>
<tr valign="top" class="odd"><td><tt>:enabled</tt></td><td>The widget is <a href="qwidget.html#enabled-prop">enabled</a>. <a name="enabled-enabled-ps"></a></td></tr>
<tr valign="top" class="even"><td><tt>:focus</tt></td><td>The widget has <a href="qwidget.html#focus-prop">input focus</a>.</td></tr>
<tr valign="top" class="odd"><td><tt>:hover</tt> <a name="hover-ps"></a></td><td>The mouse is hovering over the widget.</td></tr>
<tr valign="top" class="even"><td><tt>:indeterminate</tt> <a name="indeterminate-ps"></a></td><td>The <a href="qcheckbox.html">QCheckBox</a> or <a href="qradiobutton.html">QRadioButton</a> is <a href="qt.html#CheckState-enum">partially checked</a>.</td></tr>
<tr valign="top" class="odd"><td><tt>:off</tt> <a name="off-ps"></a></td><td>For widgets that can be toggled, this applies to widgets in the "off" state.</td></tr>
<tr valign="top" class="even"><td><tt>:on</tt> <a name="on-ps"></a></td><td>For widgets that can be toggled, this applies to widgets in the "on" state. This also applies to <a href="qcombobox.html">QComboBox</a>es that have their list open, and to <a href="qmenubar.html">QMenuBar</a>s that have one of their menus open.</td></tr>
<tr valign="top" class="odd"><td><tt>:pressed</tt> <a name="pressed-ps"></a></td><td>The widget is being pressed using the mouse.</td></tr>
<tr valign="top" class="even"><td><tt>:unchecked</tt> <a name="unchecked-ps"></a></td><td>The button widget is <a href="qabstractbutton.html#checked-prop">unchecked</a>.</td></tr>
</table></p>
<a name="list-of-sub-controls"></a>
<h3>List of Sub-Controls</h3>
<p>The following sub-controls are available:</p>
<p><table width="100%" align="center" cellpadding="2" cellspacing="1" border="0">
<thead><tr valign="top" class="qt-style"><th>Sub-Control</th><th>Description</th></tr></thead>
<tr valign="top" class="odd"><td><tt>::down-arrow</tt> <a name="down-arrow-sub"></a></td><td>The down arrow of a <a href="qcombobox.html">QComboBox</a> or a <a href="qspinbox.html">QSpinBox</a>.</td></tr>
<tr valign="top" class="even"><td><tt>::down-button</tt> <a name="down-button-sub"></a></td><td>The down button of a <a href="qspinbox.html">QSpinBox</a>.</td></tr>
<tr valign="top" class="odd"><td><tt>::drop-down</tt> <a name="drop-down-sub"></a></td><td>The drop-down arrow of a <a href="qcombobox.html">QComboBox</a>.</td></tr>
<tr valign="top" class="even"><td><tt>::indicator</tt> <a name="indicator-sub"></a></td><td>The indicator of a <a href="qcheckbox.html">QCheckBox</a>, a <a href="qradiobutton.html">QRadioButton</a>, or a checkable <a href="qgroupbox.html">QGroupBox</a>.</td></tr>
<tr valign="top" class="odd"><td><tt>::item</tt> <a name="item-sub"></a></td><td>An item of a <a href="qmenubar.html">QMenuBar</a>, a <a href="qmenu.html">QMenu</a>, or a <a href="qstatusbar.html">QStatusBar</a>.</td></tr>
<tr valign="top" class="even"><td><tt>::menu-indicator</tt> <a name="menu-indicator-sub"></a></td><td>The menu indicator of a <a href="qpushbutton.html">QPushButton</a>.</td></tr>
<tr valign="top" class="odd"><td><tt>::title</tt> <a name="title-sub"></a></td><td>The title of a <a href="qgroupbox.html">QGroupBox</a>.</td></tr>
<tr valign="top" class="even"><td><tt>::up-arrow</tt> <a name="up-arrow-sub"></a></td><td>The up arrow of a <a href="qspinbox.html">QSpinBox</a>.</td></tr>
<tr valign="top" class="odd"><td><tt>::up-button</tt> <a name="up-button-sub"></a></td><td>The up button of a <a href="qspinbox.html">QSpinBox</a>.</td></tr>
</table></p>
<p>See <a href="#customizing-the-qpushbutton-s-menu-indicator-sub-control">Customizing the QPushButton's Menu Indicator Sub-Control</a> for an example of how to customize a sub-control.</p>
<a name="box-model"></a><a name="the-box-model"></a>
<h2>The Box Model</h2>
<p>Widgets and sub-controls that support the <a href="#background-attr">background</a>, <a href="#border-attr">border</a>, <a href="#margin-attr">margin</a>, and <a href="#padding-attr">padding</a> attributes follow the box model. The image below illustrates how these attributes relate to each other:</p>
<p align="center"><img src="images/stylesheet-boxmodel.png" /></p><ul>
<li>The margin falls outside the border.</li>
<li>The border is drawn between the margin and the padding.</li>
<li>The padding falls inside the border, between the border and the actual contents.</li>
<li>The content is what is left from the original widget or sub-control once we have removed the margin, the border, and the padding.</li>
</ul>
<p>The <a href="#margin-attr">margin</a>, <a href="#border-width-attr">border-width</a>, and <a href="#padding-attr">padding</a> attributes all default to zero. In that case, all four rectangles (<tt>margin</tt>, <tt>border</tt>, <tt>padding</tt>, and <tt>content</tt>) coincide exactly.</p>
<p>If a background is specified for a widget, by default it is drawn only for the area inside the border. This can be changed using the <a href="#background-origin-attr">background-origin</a> attribute.</p>
<a name="examples"></a>
<h2>Examples</h2>
<p>In this section, we will see examples of how to style widgets using style sheets. <a href="designer-manual.html#qt-designer">Qt Designer</a> is an excellent tool to preview style sheets. Just right-click anywhere on the form you're designing and click <b>Edit <a href="#stylesheet">styleSheet</a></b>.</p>
<a name="customizing-the-foreground-and-background-colors"></a>
<h3>Customizing the Foreground and Background Colors</h3>
<p>Let's start by setting yellow as the background color of all <a href="qlineedit.html">QLineEdit</a>s in an application. This could be achieved like this:</p>
<pre> qApp->setStyleSheet("QLineEdit { background-color: yellow }");</pre>
<p>If we want the attribute to apply only to the <a href="qlineedit.html">QLineEdit</a>s that are children (or grandchildren or grand-grandchildren) of a specific dialog, we would rather do this:</p>
<pre> myDialog->setStyleSheet("QLineEdit { background-color: yellow }");</pre>
<p>If we want the attribute to apply only to one specific <a href="qlineedit.html">QLineEdit</a>, we can give it a name using <a href="qobject.html#objectName-prop">QObject::setObjectName</a>() and use an ID Selector to refer to it:</p>
<pre> myDialog->setStyleSheet("QLineEdit#nameEdit { background-color: yellow }");</pre>
<p>Alternatively, we can set the <a href="#background-attr">background-color</a> attribute directly on the <a href="qlineedit.html">QLineEdit</a>, omitting the selector:</p>
<pre> nameEdit->setStyleSheet("background-color: yellow");</pre>
<p>To ensure a good contrast, we should also specify a suitable color for the text:</p>
<pre> nameEdit->setStyleSheet("color: blue; background-color: yellow");</pre>
<p>It might be a good idea to change the colors used for selected text as well:</p>
<pre> nameEdit->setStyleSheet("color: blue;"
"background-color: yellow;"
"selection-color: yellow;"
"selection-background-color: blue;");</pre>
<p>There are many situations where we need to present a form that has mandatory fields. To indicate to the user that the field is mandatory, one effective (albeit esthetically dubious) solution is to use yellow as the background color for those fields. It turns out this is very easy to implement using Qt Style Sheets. First, we would use the following application-wide style sheet:</p>
<pre> *[mandatoryField="true"] { background-color: yellow }</pre>
<p>This means that every widget whose <tt>mandatoryField</tt> property is set to true would have a yellow background.</p>
<p>Then, for each mandatory field widget, we would simply create a <tt>mandatoryField</tt> property on the fly and set it to true. For example:</p>
<pre> QLineEdit *nameEdit = new QLineEdit(this);
nameEdit->setProperty("mandatoryField", true);
QLineEdit *emailEdit = new QLineEdit(this);
emailEdit->setProperty("mandatoryField", true);
QSpinBox *ageSpinBox = new QSpinBox(this);
ageSpinBox->setProperty("mandatoryField", true);</pre>
<a name="customizing-a-qpushbutton-using-the-box-model"></a>
<h3>Customizing a QPushButton Using the Box Model</h3>
<p>This time, we will show how to create a red <a href="qpushbutton.html">QPushButton</a>. This <a href="qpushbutton.html">QPushButton</a> would presumably be connected to a very destructive piece of code.</p>
<p>First, we are tempted to use this style sheet:</p>
<pre> QPushButton#evilButton { background-color: red }</pre>
<p>However, the result is a boring, flat button with no borders:</p>
<p align="center"><img src="images/stylesheet-redbutton1.png" alt="A flat red button" /></p><p>What happened is this:</p>
<ul>
<li>We have made a request that cannot be satisfied using the native styles alone (e.g., the Windows XP theme engine doesn't let us specify the background color of a button).</li>
<li>Therefore, the button is rendered using style sheets.</li>
<li>We haven't specified any values for <a href="#border-width-attr">border-width</a> and <a href="#border-style-attr">border-style</a>, so by default we obtain a 0-pixel wide border of style <tt>none</tt>.</li>
</ul>
<p>Let's improve the situation by specifying a border:</p>
<pre> QPushButton#evilButton {
background-color: red;
border-style: outset;
border-width: 2px;
border-color: beige;
}</pre>
<p align="center"><img src="images/stylesheet-redbutton2.png" alt="A red button with a beige border" /></p><p>Things look already a lot better. But the button looks a bit cramped. Let's specify some spacing between the border and the text using the <a href="#padding-attr">padding</a>. Additionally, we will enforce a minimum width, round the corners, and specify a larger font to make the button look nicer:</p>
<pre> QPushButton#evilButton {
background-color: red;
border-style: outset;
border-width: 2px;
border-radius: 10px;
border-color: beige;
font: bold 14px;
min-width: 10em;
padding: 6px;
}</pre>
<p align="center"><img src="images/stylesheet-redbutton3.png" alt="A red button with a round beige border and big, bold text" /></p><p>The only issue remaining is that the button doesn't react when we press it. We can fix this by specifying a slightly different background color and use a different border style.</p>
<pre> QPushButton#evilButton {
background-color: red;
border-style: outset;
border-width: 2px;
border-radius: 10px;
border-color: beige;
font: bold 14px;
min-width: 10em;
padding: 6px;
}
QPushButton#evilButton:pressed {
background-color: rgb(224, 0, 0);
border-style: inset;
}</pre>
<a name="customizing-the-qpushbutton-s-menu-indicator-sub-control"></a>
<h3>Customizing the QPushButton's Menu Indicator Sub-Control</h3>
<p>Sub-controls give access to the sub-elements of a widget. For example, a <a href="qpushbutton.html">QPushButton</a> associated with a menu (using <a href="qpushbutton.html#setMenu">QPushButton::setMenu</a>()) has a menu indicator. Let's customize the menu indicator for the red push button:</p>
<pre> QPushButton#evilButton::menu-indicator {
image: url(myindicator.png);
}</pre>
<p>By default, the menu indicator is located at the bottom-right corner of the padding rectangle. We can change this by specifying <a href="#subcontrol-position-attr">subcontrol-position</a> and <a href="#subcontrol-origin-attr">subcontrol-origin</a> to anchor the indicator differently. We can also use <a href="#top-attr">top</a> and <a href="#left-attr">left</a> to move the indicator by a few pixels. For example:</p>
<pre> QPushButton::menu-indicator {
image: url(myindicator.png);
subcontrol-position: right center;
subcontrol-origin: padding;
left: -2px;
}</pre>
<p>This positions the <tt>myindicator.png</tt> to the center right of the <a href="qpushbutton.html">QPushButton</a>'s <a href="#padding-attr">padding</a> rectangle (see <a href="#subcontrol-origin-attr">subcontrol-origin</a> for more information).</p>
<a name="complex-selector-example"></a>
<h3>Complex Selector Example</h3>
<p>Since red seems to be our favorite color, let's make the text in <a href="qlineedit.html">QLineEdit</a> red by setting the following application-wide stylesheet:</p>
<pre> QLineEdit { color: red }</pre>
<p>However, we would like to give a visual indication that a <a href="qlineedit.html">QLineEdit</a> is read-only by making it appear gray:</p>
<pre> QLineEdit { color: red }
QLineEdit[readOnly="true"] { color: gray }</pre>
<p>At some point, our design team comes with the requirement that all <a href="qlineedit.html">QLineEdit</a>s in the registration form (with the <a href="qobject.html#objectName-prop">object name</a> <tt>registrationDialog</tt>) to be brown:</p>
<pre> QLineEdit { color: red }
QLineEdit[readOnly="true"] { color: gray }
#registrationDialog QLineEdit { color: brown }</pre>
<p>A few UI design meetings later, we decide that all our <a href="qdialog.html">QDialog</a>s should have brown colored <a href="qlineedit.html">QLineEdit</a>s:</p>
<pre> QLineEdit { color: red }
QLineEdit[readOnly="true"] { color: gray }
QDialog QLineEdit { color: brown }</pre>
<p>Quiz: What happens if we have a read-only <a href="qlineedit.html">QLineEdit</a> in a <a href="qdialog.html">QDialog</a>? [Hint: The <a href="#conflict-resolution">Conflict Resolution</a> section above explains what happens in cases like this.]</p>
<p>See also <a href="widgets-stylesheet.html">Style Sheet Example</a>, <a href="richtext-html-subset.html">Supported HTML Subset</a>, and <a href="qstyle.html">QStyle</a>.</p>
<p /><address><hr /><div align="center">
<table width="100%" cellspacing="0" border="0"><tr class="address">
<td width="30%">Copyright © 2006 <a href="trolltech.html">Trolltech</a></td>
<td width="40%" align="center"><a href="trademarks.html">Trademarks</a></td>
<td width="30%" align="right"><div align="right">Qt 4.2.1</div></td>
</tr></table></div></address></body>
</html>
