常用QSS整理

原创已于 2025-08-13 16:37:23 修改 · 2.1k 阅读

22 ·

CC 4.0 BY-SA版权

文章标签：

#qt #ui

于 2023-12-14 13:21:21 首次发布

Qt整理专栏收录该内容

6 篇文章

订阅专栏

1.按钮组件

(1) QPushButton

QPushButton {
    background-color: #4682b4;        // 背景色(也支持渐变背景)
    color: white;                     // 文字颜色
	
	// 边框
	border-style: solid;              // 实线
    border-width: 2px;                // 2像素宽
    border-color: #4682b4;	          // 边框颜色
	border-radius: 10px;			  // 圆角边框
    border-image: url(*.png);         // 边框图片

    padding:5px;                      // 内边距
    width:70px; height:60px;          // 按钮大小
}
// 鼠标悬停状体
QPushButton:hover {
	background-color: #87ceeb;
}	
// 按钮按下状态
QPushButton:pressed {
	background-color: #1e90ff;
}
// 禁用状态
QPushButton:disabled {
	background-color: #dcdcdc;
	color: #808080;
}

(2) QToolButton

QToolButton {
    background-color: #4682b4;        // 背景色(也支持渐变背景)
    color: white;                     // 文字颜色
	
	// 边框
	border-style: solid;              // 实线
    border-width: 2px;                // 2像素宽
    border-color: #4682b4;	          // 边框颜色
	border-radius: 10px;			  // 圆角边框
    border-image: url(*.png);         // 边框图片

    padding:5px;                      // 内边距

    qproperty-icon:url(*.png);        // 指定图标
    qproperty-iconSize: 24px;         // 图标大小
    qproperty-toolButtonStyle: ToolButtonTextUnderIcon;  /* 文本在图标下方 */ 
    // qproperty-toolButtonStyle:ToolButtonIconOnly;
}
// 鼠标悬停状体
QToolButton:hover {
	background-color: #87ceeb;
    border-color: #999999;
    border:1px;
}	
// 按钮按下状态
QToolButton:pressed {
	background-color: #1e90ff;
}
// 禁用状态
QToolButton:disabled {
	background-color: #dcdcdc;
	color: #808080;
}
// 按钮点击
QToolButton:checked{
    background-color:white; 
    color:white; 
    background:transparent;
}
// 按钮选中
QToolButton:checked {
    background-color: #00aaff;
    color: white;
}
// 按钮未选中
QToolButton:unchecked {
    background-color: #f0f0f0;
    border: 1px solid #dcdcdc;
}
// 支持下拉菜单
QToolButton:menu-button {
    subcontrol-origin: padding;
    subcontrol-position: right center;
    width: 16px;
    border-left:1px solid #cccccc;
    border-radius: 0;
}

(3) QCheckBox

QCheckBox {
    color: red;                              // 文字颜色
    background-color: rgb(101, 101, 101);    // 背景颜色
    spacing:5px;                             // 文字与选择框之间的间距
}
QCheckBox::indicator {
    width: 20px;					        // 选择框大小
    height: 20px;					        
}
QCheckBox:checked {
    background-color: #00FF00;		        // 背景色
	border: 1px solid #00FF00;		        // 边框
	color: #00FF00;					        // 文字颜色
}
QCheckBox::indicator:checked {		        // 选中状态下图标
    image: url(checked.png);
}
QCheckBox:unchecked {
    background-color: #FFFFFF;		        // 背景色
	border: 1px solid #000000;		        // 边框
	color: #000000;					        // 文字颜色
}
QCheckBox::indicator:unchecked {	        // 未选中状态下图标
    image: url(unchecked.png);
}

(4) QRadioButton

QRadioButton {
    color: blue;          // 文字颜色
    font-size: 14px;      // 文字大小   
    spacing: 10px;        // 文字与单选按钮之间的间隔
}
QRadioButton::indicator:unchecked {        // 未选中状态图片
    image: url(:/icons/unchecked.png);
}    
QRadioButton::indicator:checked {         // 选中状态图片
    image: url(:/icons/checked.png);
}

2.输入类组件

(1) QComboBox

/*设置下拉控件*/
QComboBox {
    color: black;        // 背景色
}
/* 设置下拉箭头按钮的样式 */
QComboBox::drop-down {
    border: none;
    width: 20px;
}

/* 设置下拉箭头按钮的图标 */
QComboBox::down-arrow {
    image: url(:/images/down_arrow.png);
}

/* 设置下拉箭头按钮的大小 */
QComboBox::down-arrow {
    width: 10px;
    height: 10px;
}

/* 设置下拉列表的样式 */
QComboBox::menu {
    background-color: white;
    border: 1px solid #ccc;
    padding: 5px;
    width: 150px;
}

/* 设置下拉列表中的项目样式 */
QComboBox::item {
    padding: 5px;
    background-color: rgb(54, 54, 54);    // 背景色
    color: white;                        // 文字颜色
}

/* 设置下拉列表中的选中项目样式 */
QComboBox::item:selected {
    background-color: #ccc;
}

/* 设置下拉列表的滚动条样式 */
QComboBox::menu QScrollBar {
    width: 10px;
    background-color: #eee;
}

/* 设置下拉列表的滚动条滑块样式 */
QComboBox::menu QScrollBar::handle {
    background: #ccc;
    min-height: 20px;
}

/* 设置下拉列表的滚动条箭头样式 */
QComboBox::menu QScrollBar::add-line,
QComboBox::menu QScrollBar::sub-line {
    height: 10px;
    background: #ccc;
}

/* 设置下拉列表的滚动条箭头图标样式 */
QComboBox::menu QScrollBar::add-line:vertical {
    subcontrol-position: bottom;
    subcontrol-origin: margin;
    image: url(:/images/scroll_down.png);
}

QComboBox::menu QScrollBar::sub-line:vertical {
    subcontrol-position: top;
    subcontrol-origin: margin;
    image: url(:/images/scroll_up.png);
}

/* 设置下拉列表的滚动条滑块鼠标悬停样式 */
QComboBox::menu QScrollBar::handle:hover {
    background: #aaa;
}

/* 设置下拉列表的滚动条滑块鼠标按下样式 */
QComboBox::menu QScrollBar::handle:pressed {
    background: #888;
}

注意：上面的样式中:/images/down_arrow.png和:/images/scroll_down.png,:/images/scroll_up.png是图片资源的路径，可以根据自己的实际情况进行修改。同时，你也可以根据自己的需求进行样式的修改和调整。

(2) QFontComboBox

/* 设置字体下拉框的边框样式 */
QFontComboBox {
    border: 1px solid #ccc;
    padding: 3px;
}

/* 设置字体下拉框的下拉箭头按钮样式 */
QFontComboBox::down-arrow {
    image: url(:/images/down_arrow.png);
    width: 10px;
    height: 10px;
}

/* 设置字体下拉框的下拉列表样式 */
QFontComboBox::drop-down {
    subcontrol-origin: padding;
    subcontrol-position: top right;
    width: 15px;
    border-left-width: 1px;
    border-left-color: #ccc;
    border-left-style: solid;
    padding-left: 2px;
    padding-top: 1px;
}

/* 设置字体下拉框的下拉列表背景色 */
QFontComboBox::down-arrow {
    background-color: white;
}

/* 设置字体下拉框的下拉列表中的项目样式 */
QFontComboBox QAbstractItemView::item {
    padding: 2px;
}

/* 设置字体下拉框的下拉列表中的选中项目样式 */
QFontComboBox QAbstractItemView::item:selected {
    background-color: #ccc;
}

/* 设置字体下拉框的下拉列表的滚动条样式 */
QFontComboBox QAbstractItemView::scrollbar {
    width: 10px;
    background-color: #eee;
}

/* 设置字体下拉框的下拉列表的滚动条滑块样式 */
QFontComboBox QAbstractItemView::scrollbar:handle {
    background: #ccc;
    min-height: 20px;
}

/* 设置字体下拉框的下拉列表的滚动条箭头样式 */
QFontComboBox QAbstractItemView::scrollbar:add-line,
QFontComboBox QAbstractItemView::scrollbar:sub-line {
    height: 10px;
    background: #ccc;
}

/* 设置字体下拉框的下拉列表的滚动条箭头图标样式 */
QFontComboBox QAbstractItemView::scrollbar:add-line:vertical {
    subcontrol-position: bottom;
    subcontrol-origin: margin;
    image: url(:/images/scroll_down.png);
}

QFontComboBox QAbstractItemView::scrollbar:sub-line:vertical {
    subcontrol-position: top;
    subcontrol-origin: margin;
    image: url(:/images/scroll_up.png);
}

/* 设置字体下拉框的下拉列表的滚动条滑块鼠标悬停样式 */
QFontComboBox QAbstractItemView::scrollbar:handle:hover {
    background: #aaa;
}

/* 设置字体下拉框的下拉列表的滚动条滑块鼠标按下样式 */
QFontComboBox QAbstractItemView::scrollbar:handle:pressed {
    background: #888;
}

注意：上面的样式中:/images/down_arrow.png、:/images/scroll_down.png和:/images/scroll_up.png是图片资源的路径，可以根据自己的实际情况进行修改。同时，你也可以根据自己的需求进行样式的修改和调整。

(3) QLineEdit

/* 设置 QLineEdit的边框样式 */
QLineEdit {
    color: #000;
    background-color: #fff;

    border: 1px solid #ccc;
    padding: 2px;
    
    border-radius: 5px;
}

/* 设置 QLineEdit的焦点边框样式 */
QLineEdit:focus {
    border: 1px solid blue;
}

/* 设置 QLineEdit的提示文本颜色 */
QLineEdit::placeholder {
    color: #aaa;
}

/* 设置 QLineEdit的清除按钮样式 */
QLineEdit {
    padding-right: 20px;
}
/* 设置 QLineEdit的清除按钮图标样式 */
QLineEdit::clear-button {
    image: url(:/images/clear.png);
    width: 12px;
    height: 12px;
    subcontrol-origin: padding;
    subcontrol-position: right;
    right: 5px;
}

/* 设置 QLineEdit的下拉按钮样式 */
QLineEdit {
    padding-right: 20px;
}
/* 设置 QLineEdit的下拉按钮图标样式 */
QLineEdit::drop-down {
    image: url(:/images/down_arrow.png);
    width: 12px;
    height: 12px;
    subcontrol-origin: padding;
    subcontrol-position: right;
    right: 5px;
}

注意：上面的样式中:/images/clear.png和:/images/down_arrow.png是图片资源的路径，可以根据自己的实际情况进行修改。同时，你也可以根据自己的需求进行样式的修改和调整。

(4) QPlainTextEdit

下面是一些常用的QPlainTextEdit的QSS样式：

/* 设置 QPlainTextEdit的边框样式 */
QPlainTextEdit {
    border: 1px solid #ccc;
    padding: 2px;
}

/* 设置 QPlainTextEdit的焦点边框样式 */
QPlainTextEdit:focus {
    border: 1px solid blue;
}

/* 设置 QPlainTextEdit的背景色 */
QPlainTextEdit {
    background-color: #fff;
}

/* 设置 QPlainTextEdit的文本内容的颜色 */
QPlainTextEdit {
    color: #000;
}

/* 设置 QPlainTextEdit的圆角边框样式 */
QPlainTextEdit {
    border-radius: 5px;
}

/* 设置 QPlainTextEdit的滚动条样式 */
QPlainTextEdit::verticalScrollBar {
    width: 10px;
    background-color: #eee;
}

QPlainTextEdit::verticalScrollBar::handle {
    background-color: #ccc;
}

QPlainTextEdit::verticalScrollBar::add-page,
QPlainTextEdit::verticalScrollBar::sub-page {
    background: none;
}

/* 设置 QPlainTextEdit的滚动条宽度样式 */
QPlainTextEdit {
    scrollbar-width: thin;
}

/* 设置 QPlainTextEdit的选中文本的背景色 */
QPlainTextEdit::selection {
    background-color: blue;
    color: white;
}

/* 设置 QPlainTextEdit的行号样式 */
QPlainTextEdit QWidget#qt_scrollarea_viewport {
    background-color: #eee;
}

QPlainTextEdit QScrollBar:vertical {
    width: 15px;
}

QPlainTextEdit QScrollBar::handle:vertical {
    background-color: #ccc;
}

QPlainTextEdit QScrollBar::add-page:vertical,
QPlainTextEdit QScrollBar::sub-page:vertical {
    background: none;
}

注意：上面的样式可以根据自己的需求进行修改和调整，同时也可以添加其他样式来满足你的需求。

(5) QSpinBox和QDoubleSpinBox

下面是一些常用的QSpinBox的QSS样式：

/* 设置 QSpinBox的边框样式 */
QSpinBox {
    border: 1px solid #ccc;
    padding: 2px;
}

/* 设置 QSpinBox的焦点边框样式 */
QSpinBox:focus {
    border: 1px solid blue;
}

/* 设置 QSpinBox的背景色 */
QSpinBox {
    background-color: #fff;
}

/* 设置 QSpinBox的文本内容的颜色 */
QSpinBox {
    color: #000;
}

/* 设置 QSpinBox的圆角边框样式 */
QSpinBox {
    border-radius: 5px;
}

/* 设置 QSpinBox的上下调节按钮样式 */
QSpinBox::up-button,
QSpinBox::down-button {
    width: 30px;
    height: 20px;
    border: none;
    background-color: #ccc;
}

QSpinBox::up-button:hover,
QSpinBox::down-button:hover {
    background-color: #aaa;
}

/* 设置 QSpinBox的上下调节按钮箭头的颜色 */
QSpinBox::up-arrow,
QSpinBox::down-arrow {
    image: url(:/icons/arrow.png);
    width: 10px;
    height: 10px;
}

/* 设置 QSpinBox的上下调节按钮箭头的颜色 */
QSpinBox::up-arrow {
    subcontrol-origin: border;
    subcontrol-position: top right;
}

QSpinBox::down-arrow {
    subcontrol-origin: border;
    subcontrol-position: bottom right;
}

注意：上面的样式可以根据自己的需求进行修改和调整，同时也可以添加其他样式来满足你的需求。

QDoubleSpinBox与QSpinBox的使用方式类似。

(6) QDateEdit、QTimeEdit和QDateTimeEdit

下面是一些常用的QDateEdit的QSS样式：

/* 设置 QDateEdit的边框样式 */
QDateEdit {
    border: 1px solid #ccc;
    padding: 2px;
}

/* 设置 QDateEdit的焦点边框样式 */
QDateEdit:focus {
    border: 1px solid blue;
}

/* 设置 QDateEdit的背景色 */
QDateEdit {
    background-color: #fff;
}

/* 设置 QDateEdit的文本内容的颜色 */
QDateEdit {
    color: #000;
}

/* 设置 QDateEdit的圆角边框样式 */
QDateEdit {
    border-radius: 5px;
}

/* 设置 QDateEdit的下拉按钮样式 */
QDateEdit::drop-down {
    width: 20px;
    height: 20px;
    border: none;
}

QDateEdit::drop-down:hover {
    background-color: #ccc;
}

/* 设置 QDateEdit的下拉按钮箭头样式 */
QDateEdit::down-arrow {
    image: url(:/icons/arrow.png);
    width: 10px;
    height: 10px;
}

/* 设置 QDateEdit的日历弹出窗口样式 */
QDateEdit QCalendarWidget {
    background-color: #fff;
    color: #000;
}

/* 设置 QDateEdit的日历弹出窗口中选中日期的背景色 */
QDateEdit QCalendarWidget QTableView::item:selected {
    background-color: blue;
    color: #fff;
}

/* 设置 QDateEdit的日历弹出窗口中当前日期的背景色 */
QDateEdit QCalendarWidget QTableView::item:alternate:selected {
    background-color: #eee;
}

/* 设置 QDateEdit的日历弹出窗口中鼠标悬停的日期背景色 */
QDateEdit QCalendarWidget QTableView::item:hover {
    background-color: #ccc;
}

注意：上面的样式可以根据自己的需求进行修改和调整，同时也可以添加其他样式来满足你的需求。

QTimeEdit、QDateTimeEdit的使用方式与QDateEdit类似。

(7) QDial

下面是一些常用的QDial的QSS样式：

/* 设置 QDial的大小和边框样式 */
QDial {
    width: 100px;
    height: 100px;
    border: 1px solid #ccc;
}

/* 设置 QDial的背景色 */
QDial {
    background-color: #fff;
}

/* 设置 QDial的刻度颜色 */
QDial::groove {
    background-color: #ccc;
}

/* 设置 QDial的刻度指示器样式 */
QDial::handle {
    background-color: blue;
    border-radius: 15px;
    width: 30px;
    height: 30px;
    margin: -5px;
}

/* 设置 QDial的刻度文本样式 */
QDial::sub-page {
    background-color: transparent;
}

/* 设置 QDial的文本颜色 */
QDial {
    color: #000;
}

/* 设置 QDial的刻度颜色 */
QDial::tick {
    background-color: #000;
}

/* 设置 QDial的刻度文本样式 */
QDial::tick-label {
    color: #000;
}

/* 设置 QDial的焦点边框样式 */
QDial:focus {
    border: 1px solid blue;
}

注意：上面的样式可以根据自己的需求进行修改和调整，同时也可以添加其他样式来满足你的需求。

(8) QScrollBar

下面是一些常用的QScrollBar的QSS样式：

/* 设置垂直的QScrollBar的宽度和背景色 */
QScrollBar:vertical {
    width: 15px;
    background-color: #eee;
}

/* 设置水平的QScrollBar的高度和背景色 */
QScrollBar:horizontal {
    height: 15px;
    background-color: #eee;
}

/* 设置QScrollBar的滑块样式 */
QScrollBar::handle {
    background-color: #ccc;
}

/* 设置QScrollBar的滑块悬停样式 */
QScrollBar::handle:hover {
    background-color: #aaa;
}

/* 设置QScrollBar的滑块按下样式 */
QScrollBar::handle:pressed {
    background-color: #888;
}

/* 设置QScrollBar的滑块圆角 */
QScrollBar::handle {
    border-radius: 7px;
}

/* 设置QScrollBar的滑块边框样式 */
QScrollBar::handle {
    border: none;
}

/* 设置QScrollBar的滑块阴影样式 */
QScrollBar::handle {
    box-shadow: none;
}

/* 设置QScrollBar的上下（左右）箭头按钮样式 */
QScrollBar::add-line, QScrollBar::sub-line {
    background-color: transparent;
    border: none;
}

/* 设置QScrollBar的上下（左右）箭头图标样式 */
QScrollBar::add-line:vertical, QScrollBar::sub-line:vertical {
    border-image: url(add.png) 0 0 0 0 stretch stretch;
}

/* 设置QScrollBar的上下（左右）箭头图标样式 */
QScrollBar::add-line:horizontal, QScrollBar::sub-line:horizontal {
    border-image: url(add.png) 0 0 0 0 stretch stretch;
}

/* 设置QScrollBar的上下（左右）箭头悬停样式 */
QScrollBar::add-line:vertical:hover, QScrollBar::sub-line:vertical:hover {
    background-color: #ddd;
}

/* 设置QScrollBar的上下（左右）箭头按下样式 */
QScrollBar::add-line:vertical:pressed, QScrollBar::sub-line:vertical:pressed {
    background-color: #bbb;
}

/* 设置QScrollBar的上下（左右）箭头图标旋转角度 */
QScrollBar::add-line:vertical {
    subcontrol-position: bottom;
    subcontrol-origin: margin;
    transform: rotate(180deg);
}

/* 设置QScrollBar的上下（左右）箭头图标旋转角度 */
QScrollBar::add-line:horizontal {
    subcontrol-position: right;
    subcontrol-origin: margin;
    transform: rotate(90deg);
}

/* 设置QScrollBar的上下（左右）箭头图标旋转角度 */
QScrollBar::sub-line:horizontal {
    subcontrol-position: left;
    subcontrol-origin: margin;
    transform: rotate(90deg);
}

/* 设置QScrollBar的滑块悬停样式 */
QScrollBar::sub-line:horizontal:hover {
    background-color: #ddd;
}

/* 设置QScrollBar的滑块按下样式 */
QScrollBar::sub-line:horizontal:pressed {
    background-color: #bbb;
}

/* 设置QScrollBar的上下（左右）箭头按钮样式 */
QScrollBar::add-page, QScrollBar::sub-page {
    background-color: transparent;
}

/* 设置QScrollBar的悬停区域样式 */
QScrollBar::add-page, QScrollBar::sub-page {
    background-color: #fff;
}

/* 设置QScrollBar的滑块和悬停区域之间的间隔大小 */
QScrollBar::add-page, QScrollBar::sub-page {
    margin: 2px;
}

/* 设置QScrollBar的悬停区域圆角 */
QScrollBar::add-page, QScrollBar::sub-page {
    border-radius: 7px;
}

/* 设置QScrollBar的悬停区域边框样式 */
QScrollBar::add-page, QScrollBar::sub-page {
    border: none;
}

/* 设置QScrollBar的悬停区域阴影样式 */
QScrollBar::add-page, QScrollBar::sub-page {
    box-shadow: none;
}

/* 设置QScrollBar的滑块悬停样式 */
QScrollBar::add-page:vertical:hover, QScrollBar::sub-page:vertical:hover {
    background-color: #ddd;
}

/* 设置QScrollBar的滑块按下样式 */
QScrollBar::add-page:vertical:pressed, QScrollBar::sub-page:vertical:pressed {
    background-color: #bbb;
}

/* 设置QScrollBar的滑块悬停样式 */
QScrollBar::add-page:horizontal:hover, QScrollBar::sub-page:horizontal:hover {
    background-color: #ddd;
}

/* 设置QScrollBar的滑块按下样式 */
QScrollBar::add-page:horizontal:pressed, QScrollBar::sub-page:horizontal:pressed {
    background-color: #bbb;
}

/* 设置QScrollBar的横向滑动条的标记线样式 */
QScrollBar::add-line:horizontal, QScrollBar::sub-line:horizontal {
    background-color: transparent;
    border: none;
}

/* 设置QScrollBar的横向滑动条的标记线样式 */
QScrollBar::add-line:horizontal {
    subcontrol-position: bottom;
    subcontrol-origin: margin;
    transform: rotate(90deg);
}

/* 设置QScrollBar的横向滑动条的标记线样式 */
QScrollBar::sub-line:horizontal {
    subcontrol-position: top;
    subcontrol-origin: margin;
    transform: rotate(90deg);
}

/* 设置QScrollBar的横向滑动条的标记线悬停样式 */
QScrollBar::add-line:horizontal:hover, QScrollBar::sub-line:horizontal:hover {
    background-color: #ddd;
}

/* 设置QScrollBar的横向滑动条的标记线按下样式 */
QScrollBar::add-line:horizontal:pressed, QScrollBar::sub-line:horizontal:pressed {
    background-color: #bbb;
}

注意：上面的样式可以根据自己的需求进行修改和调整，同时也可以添加其他样式来满足你的需求。

(9) QSlider

下面是一些常用的QSlider的QSS样式：

/* 设置横向QSlider的高度和背景色 */
QSlider:horizontal {
    height: 10px;
    background-color: #eee;
}

/* 设置垂直QSlider的宽度和背景色 */
QSlider:vertical {
    width: 10px;
    background-color: #eee;
}

/* 设置QSlider的滑块样式 */
QSlider::handle {
    background-color: #ccc;
    width: 10px;
    height: 10px;
    margin: -5px 0;
    border-radius: 5px;
}

/* 设置QSlider的滑块悬停样式 */
QSlider::handle:hover {
    background-color: #aaa;
}

/* 设置QSlider的滑块按下样式 */
QSlider::handle:pressed {
    background-color: #888;
}

/* 设置横向QSlider的轨道样式 */
QSlider::groove:horizontal {
    height: 4px;
    background-color: #ddd;
}

/* 设置垂直QSlider的轨道样式 */
QSlider::groove:vertical {
    width: 4px;
    background-color: #ddd;
}

/* 设置横向QSlider的滑动区域样式 */
QSlider::sub-page:horizontal {
    background-color: #aaa;
}

/* 设置垂直QSlider的滑动区域样式 */
QSlider::sub-page:vertical {
    background-color: #aaa;
}

/* 设置横向QSlider的非滑动区域样式 */
QSlider::add-page:horizontal {
    background-color: #ccc;
}

/* 设置垂直QSlider的非滑动区域样式 */
QSlider::add-page:vertical {
    background-color: #ccc;
}

注意：上面的样式可以根据自己的需求进行修改和调整，同时也可以添加其他样式来满足你的需求。

(10) QSpinBox

/*QSpinBox外表样式*/
QSpinBox 
{
    padding-right: 15px;         /* make room for the arrows */
    border:1px solid black;
    border-radius:5px;
    background-color:#444444;
    height:30px; width:30px;
}

/*QSpinBox上拉与下拉按钮图片*/
QSpinBox::up-button 
{
    border-image:url(:/image/images/up_arrow.png);
    height:15px;
}

QSpinBox::down-button 
{
    border-image:url(:/image/images/down_arrow.png)
    height:15px;
}

/*QSpinBox上拉与下拉按钮点击动态效果*/
QSpinBox::up-button:pressed {
margin-top:3px;
}

QSpinBox::down-button:pressed {
margin-bottom:3px;
}

3.显示类组件

(1) QLabel

/* 设置QLabel的 */
QLabel {
    color: #333;                // 文本颜色
    background-color: #eee;     // 背景颜色
    border: 1px solid #ccc;     // 边框样式， dashed gray(虚线边框)
    border-radius: 10px;        // 圆角边框

    font-family: Arial;         // 字体样式
    font-size: 12px;
    font-weight: bold;
    // font: bold 14px "Arial"; // 整体方式
    
    alignment: center;          // 对其方式

    overflow: hidden;           // 文本溢出方式
    text-overflow: ellipsis;
    white-space: nowrap;
}

// 伪状态
/* 设置QLabel的鼠标悬停样式 */
QLabel:hover {
    background-color: #ccc;
}

/* 设置QLabel的鼠标按下样式 */
QLabel:pressed {
    background-color: #aaa;
}

注意：上面的样式可以根据自己的需求进行修改和调整，同时也可以添加其他样式来满足你的需求。

(2) QTextBrowser

/* 设置QTextBrowser的 */
QTextBrowser {
    background-color: #eee;        // 背景颜色
    border: 1px solid #ccc;        // 边框样式

    scrollbar-width: thin;         // 滚动条样式
    scrollbar-color: #ccc #eee;

    color: #333;                   // 文本颜色

    font-family: Arial;            // 字体样式
    font-size: 12px;
}

// 伪样式
/* 设置QTextBrowser中链接的颜色 */
QTextBrowser a {
    color: blue;
}

/* 设置QTextBrowser中链接的悬停样式 */
QTextBrowser a:hover {
    text-decoration: underline;
}

/* 设置QTextBrowser中选中文本的背景颜色 */
QTextBrowser::selection {
    background-color: #aaa;
}

注意：上面的样式可以根据自己的需求进行修改和调整，同时也可以添加其他样式来满足你的需求。

QGraphicsView、QCalendarWidget、QLCDNumber、QProgressBar、QOpenGLWidget和QQuickWidget

4.容器类组件

(1) QTabWidget

/*背景设置*/
QTabWidget::pane{
    border:1px solid rgba(125, 250, 250, 160);
    border-radius: 3px;
    background:transparent;// 透明
    margin-top:-1px;
}

/*close按钮样式设置*/
QTabBar::close-button{
    border-image: url(:/img/blue1/tab_close.png);
}
QTabBar::close-button:hover{
    border-image: url(:/img/blue1/tab_close_h.png);
}
QTabBar::close-button:pressed{
    border-image: url(:/img/blue1/tab_close_p.png);
}
QTabBar::close-button:disabled{
    border-image: url(:/img/blue1/tab_close_d.png);
}

/*tabBar样式设置*/
QTabWidget::tab-bar{
    alignment:left;
}
QTabBar::tab{
    border-top-left-radius:3px;
    border-top-right-radius:3px;
}
QTabBar::tab:!first{
    margin-left:2px;
}
QTabBar::tab{
    color:#FFFFFF;
    padding:3px 8px 3px 8px;
    background: #11357D;
    border:1px solid #2971E2;
    border-bottom:none;
    margin-bottom:1px;
}
QTabBar::tab:hover{
    background:rgba(41, 113, 226, 128);
    border:1px solid #2971E2;
    border-bottom:none;
}
QTabBar::tab:selected{
    qproperty-icon: url(:/img/blue1/tab_icon.png);
    border:1px solid rgba(125, 250, 250, 160);
    border-bottom:none;
    border-top:1px solid #7DFAFA;
    background-color: qlineargradient(spread:pad, x1:0, y1:0, x2:0, y2:1, stop:0 rgba(125, 250, 250, 200), stop:1 rgba(9, 40, 92, 255));
    margin-bottom:0px;
}
QTabBar::tab:disabled{
    color: rgba(255, 255, 255, 128);
    background:rgba(17, 53, 112, 128);
    border:1px solid rgba(41, 113, 226, 128);
    border-bottom:none;
}

/*翻页按钮样式设置*/
QTabBar QToolButton::left-arrow{
    border-image: url(:/img/blue1/tab_arrow_l.png);
}
QTabBar QToolButton::left-arrow:hover{
    border-image: url(:/img/blue1/tab_arrow_lh.png);
}
QTabBar QToolButton::left-arrow:pressed{
    border-image: url(:/img/blue1/tab_arrow_lp.png);
}
QTabBar QToolButton::left-arrow:disabled{
    border-image: url(:/img/blue1/tab_arrow_ld.png);
}
QTabBar QToolButton::right-arrow{
    border-image: url(:/img/blue1/tab_arrow_r.png);
}
QTabBar QToolButton::right-arrow:hover{
    border-image: url(:/img/blue1/tab_arrow_rh.png);
}
QTabBar QToolButton::right-arrow:pressed{
    border-image: url(:/img/blue1/tab_arrow_rp.png);
}
QTabBar QToolButton::right-arrow:disabled{
    border-image: url(:/img/blue1/tab_arrow_rd.png);
}

(2) QGroupBox

(3) QScrollArea、

(4)QToolBox

(5) QStackedWidget

(6) QFrame

(7) QMdiArea

(8) QDockWidget

(9) QAxWidget

5.Item组件

(1) QListView

/* 设置QListView的背景颜色 */
QListView {
    background-color: #eee;
}

/* 设置QListView的边框样式 */
QListView {
    border: 1px solid #ccc;
}

/* 设置QListView的滚动条样式 */
QListView {
    scrollbar-width: thin;
    scrollbar-color: #ccc #eee;
}

/* 设置QListView的item的样式 */
QListView::item {
    padding: 5px;
}

/* 设置QListView的item在悬停状态下的样式 */
QListView::item:hover {
    background-color: #ccc;
}

/* 设置QListView的item在选中状态下的样式 */
QListView::item:selected {
    background-color: #aaa;
}

/* 设置QListView的item在禁用状态下的样式 */
QListView::item:disabled {
    color: #ccc;
}

/* 设置QListView的item中的文本颜色 */
QListView::item {
    color: #333;
}

/* 设置QListView的item中的字体样式 */
QListView::item {
    font-family: Arial;
    font-size: 12px;
}

注意：上面的样式可以根据自己的需求进行修改和调整，同时也可以添加其他样式来满足你的需求。

(2) QTreeView

QTreeView有部分使用与QListView类似，如上所示。

/* 设置QTreeView的树节点的展开/折叠按钮的样式 */
QTreeView::branch {
    image: none;
    border-image: none;
    padding: 0px;
}

/* 设置QTreeView的树节点的展开/折叠图标 */
QTreeView::branch:has-siblings:!adjoins-item {
    border-image: none;
    image: url(:/icon/expand_arrow.png);
}

QTreeView::branch:has-siblings:adjoins-item {
    border-image: none;
    image: url(:/icon/collapse_arrow.png);
}

QTreeView::branch:!has-children:!has-siblings:adjoins-item {
    border-image: none;
    image: url(:/icon/expand_arrow.png);
}

QTreeView::branch:has-children:!has-siblings:closed,
QTreeView::branch:closed:has-children:has-siblings {
    border-image: none;
    image: url(:/icon/collapse_arrow.png);
}

/* 设置QTreeView的树节点的展开/折叠图标的大小 */
QTreeView::branch {
    width: 12px;
    height: 12px;
}

(3) QTableView

下面是一些常用的QTableView的QSS样式：

/* 设置QTableView的背景颜色 */
QTableView {
    background-color: #eee;
}

/* 设置QTableView的边框样式 */
QTableView {
    border: 1px solid #ccc;
}

/* 设置QTableView的滚动条样式 */
QTableView {
    scrollbar-width: thin;
    scrollbar-color: #ccc #eee;
}

/* 设置QTableView的表头样式 */
QTableView::header {
    background-color: #ccc;
    color: #fff;
    padding: 5px;
}

/* 设置QTableView的表格行的样式 */
QTableView::item {
    padding: 5px;
}

/* 设置QTableView的表格行在悬停状态下的样式 */
QTableView::item:hover {
    background-color: #ccc;
}

/* 设置QTableView的表格行在选中状态下的样式 */
QTableView::item:selected {
    background-color: #aaa;
}

/* 设置QTableView的表格行在禁用状态下的样式 */
QTableView::item:disabled {
    color: #ccc;
}

/* 设置QTableView的表格中的文本颜色 */
QTableView::item {
    color: #333;
}

/* 设置QTableView的表格中的字体样式 */
QTableView::item {
    font-family: Arial;
    font-size: 12px;
}

/* 设置QTableView的列宽可调整 */
QTableView::handle {
    background-color: #ccc;
    border: 1px solid #ccc;
    width: 3px;
    margin: -1px 0;
}

/* 设置QTableView的拖拽时的边框样式 */
QTableView::item:selected:active {
    border: 1px solid #aaa;
}

注意：上面的样式可以根据自己的需求进行修改和调整，同时也可以添加其他样式来满足你的需求。

(4) QListWidget

下面是一些常用的QListWidget的QSS样式：

/* 设置QListWidget的背景颜色 */
QListWidget {
    background-color: #eee;
}

/* 设置QListWidget的边框样式 */
QListWidget {
    border: 1px solid #ccc;
}

/* 设置QListWidget的滚动条样式 */
QListWidget {
    scrollbar-width: thin;
    scrollbar-color: #ccc #eee;
}

/* 设置QListWidget的列表项样式 */
QListWidget::item {
    background-color: #fff;
    padding: 5px;
}

/* 设置QListWidget的列表项在悬停状态下的样式 */
QListWidget::item:hover {
    background-color: #ccc;
}

/* 设置QListWidget的列表项在选中状态下的样式 */
QListWidget::item:selected {
    background-color: #aaa;
    color: #fff;
}

/* 设置QListWidget的列表项在禁用状态下的样式 */
QListWidget::item:disabled {
    color: #ccc;
}

/* 设置QListWidget的列表项中的文本颜色 */
QListWidget::item {
    color: #333;
}

/* 设置QListWidget的列表项中的字体样式 */
QListWidget::item {
    font-family: Arial;
    font-size: 12px;
}

/* 设置QListWidget的拖拽时的边框样式 */
QListWidget::item:selected:active {
    border: 1px solid #aaa;
}

注意：上面的样式可以根据自己的需求进行修改和调整，同时也可以添加其他样式来满足你的需求。

(5) QTreeWidget

下面是一些常用的QTreeWidget的QSS样式：

QTreeWidget {
    background-color: #eee;        // 背景色
    border: 1px solid #ccc;        // 边框样式

    scrollbar-width: thin;         // 滚动条样式
    scrollbar-color: #ccc #eee;
}


/* 设置QTreeWidget的树节点样式 */
QTreeWidget::item {
    background-color: #fff;
    padding: 5px;
    color: #333;                // 文本颜色
    
    font-family: Arial;         // 字体样式
    font-size: 12px;
}

/* 设置QTreeWidget的树节点在悬停状态下的样式 */
QTreeWidget::item:hover {
    background-color: #ccc;
}

/* 设置QTreeWidget的树节点在选中状态下的样式 */
QTreeWidget::item:selected {
    background-color: #aaa;
    color: #fff;
}

/* 设置QTreeWidget的树节点的展开和折叠图标样式 */
QTreeWidget::branch:open {
    image: url(:/images/branch_open.png);
}

QTreeWidget::branch:closed {
    image: url(:/images/branch_closed.png);
}

/* QTreeWidget根节点的样式设置 */
QHeaderView::section { 
    background-color:#404040;
    color:white; 
    border: 0px solid #404040; 
    padding:3px; 
}

注意：上面的样式可以根据自己的需求进行修改和调整，同时也可以添加其他样式来满足你的需求。

(6) QTableWidget

下面是一些常用的QTableWidget的QSS样式：

/* 设置QTableWidget的背景颜色 */
QTableWidget {
    background-color: #eee;        // 背景色
    border: 1px solid #ccc;        // 边框样式
    scrollbar-width: thin;         // 滚动条样式
    scrollbar-color: #ccc #eee;
}


/* 设置QTableWidget的表头样式 */
QTableWidget::header {
    background-color: #ccc;
    color: #fff;
}

QHeaderView::section {
    background-color: #404040; 
    color: white; 
    padding: 4px; 
    border: 1px solid #505050; 
    min-height: 12px; max-height: 14px; 
}

/* 设置QTableWidget的行样式 */
QTableWidget::item {
    color: #333;            // 单元格中的文本颜色
    padding: 5px;
    font-family: Arial;     // 单元格中的字体样式
    font-size: 12px;
}

/* 设置QTableWidget的单元格在悬停状态下的样式 */
QTableWidget::item:hover {
    background-color: #ccc;
}

/* 设置QTableWidget的单元格在选中状态下的样式 */
QTableWidget::item:selected {
    background-color: #aaa;
    color: #fff;
}

注意：上面的样式可以根据自己的需求进行修改和调整，同时也可以添加其他样式来满足你的需求。

6.其它

(1) QSplitter

/*设置边框*/
QSplitter {
    border : 0px solid #d0d0d0;
}
/*分割条样式设置*/
QSplitter::handle { 
    width:8px; 
    background-color:#e0e0e0; 
    border: 1px solid #c0c0c0; 
}

/*背景设置*/
QTabWidget::pane{
    border:1px solid rgba(125, 250, 250, 160);
    border-radius: 3px;
    background:transparent;// 透明
    margin-top:-1px;
}

/*close按钮样式设置*/
QTabBar::close-button{
    border-image: url(:/img/blue1/tab_close.png);
}
QTabBar::close-button:hover{
    border-image: url(:/img/blue1/tab_close_h.png);
}
QTabBar::close-button:pressed{
    border-image: url(:/img/blue1/tab_close_p.png);
}
QTabBar::close-button:disabled{
    border-image: url(:/img/blue1/tab_close_d.png);
}

/*tabBar样式设置*/
QTabWidget::tab-bar{
    alignment:left;
}
QTabBar::tab{
    border-top-left-radius:3px;
    border-top-right-radius:3px;
}
QTabBar::tab:!first{
    margin-left:2px;
}
QTabBar::tab{
    color:#FFFFFF;
    padding:3px 8px 3px 8px;
    background: #11357D;
    border:1px solid #2971E2;
    border-bottom:none;
    margin-bottom:1px;
}
QTabBar::tab:hover{
    background:rgba(41, 113, 226, 128);
    border:1px solid #2971E2;
    border-bottom:none;
}
QTabBar::tab:selected{
    qproperty-icon: url(:/img/blue1/tab_icon.png);
    border:1px solid rgba(125, 250, 250, 160);
    border-bottom:none;
    border-top:1px solid #7DFAFA;
    background-color: qlineargradient(spread:pad, x1:0, y1:0, x2:0, y2:1, stop:0 rgba(125, 250, 250, 200), stop:1 rgba(9, 40, 92, 255));
    margin-bottom:0px;
}
QTabBar::tab:disabled{
    color: rgba(255, 255, 255, 128);
    background:rgba(17, 53, 112, 128);
    border:1px solid rgba(41, 113, 226, 128);
    border-bottom:none;
}

/*翻页按钮样式设置*/
QTabBar QToolButton::left-arrow{
    border-image: url(:/img/blue1/tab_arrow_l.png);
}
QTabBar QToolButton::left-arrow:hover{
    border-image: url(:/img/blue1/tab_arrow_lh.png);
}
QTabBar QToolButton::left-arrow:pressed{
    border-image: url(:/img/blue1/tab_arrow_lp.png);
}
QTabBar QToolButton::left-arrow:disabled{
    border-image: url(:/img/blue1/tab_arrow_ld.png);
}
QTabBar QToolButton::right-arrow{
    border-image: url(:/img/blue1/tab_arrow_r.png);
}
QTabBar QToolButton::right-arrow:hover{
    border-image: url(:/img/blue1/tab_arrow_rh.png);
}
QTabBar QToolButton::right-arrow:pressed{
    border-image: url(:/img/blue1/tab_arrow_rp.png);
}
QTabBar QToolButton::right-arrow:disabled{
    border-image: url(:/img/blue1/tab_arrow_rd.png);
}

参考：Qt之样式表qss高级样式知识 - 哔哩哔哩