【QSS样式表 - ⑩】：QSpinBox控件样式

最新推荐文章于 2025-09-28 21:59:02 发布

原创最新推荐文章于 2025-09-28 21:59:02 发布 · 988 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#PyQt5 #PySide6 #QtDesigner #QSS

QSS样式表专栏收录该内容

17 篇文章

订阅专栏

文章目录

QSS样式表
- QSS示例

QSS样式表

子控件
常用属性
对齐可以组合
```
 subcontrol-position: top left;
```

QSS示例

新建一个 QMainWindow 窗口，放置两个 QSpinBox 控件，进行如下设置：

QSpinBox{
	border: 2px solid black;
	border-radius: 10px;
	font-size: 30px;
	padding-left: 10px;
	
	selection-color: red;
	selection-background-color: yellow;
}

在这里插入图片描述

对其子控件进行设置：

QSpinBox{
	border: 2px solid black;
	border-radius: 10px;
	font-size: 30px;
	padding-left: 10px;
	
	selection-color: red;
	selection-background-color: yellow;
}

/* 朝上按钮 */
QSpinBox::up-button{
	subcontrol-origin: padding;
	subcontrol-position: top right;

	border: none;
	border-top-right-radius: 5px;
	width: 20px;
	height: 20px;
	margin-top: 2px;
	margin-right: 2px;
	background-color: red;
}

/* 朝下按钮 */
QSpinBox::down-button {
	subcontrol-origin: padding;
	subcontrol-position: bottom right;
	
	width: 20px;
	height: 20px;

	border: none;
	border-bottom-right-radius: 5px;
	margin-right: 2px;
	margin-bottom: 2px;
	background-color: yellow;
}

/* 朝下箭头 */
QSpinBox::up-arrow{
	width: 10px;
	height: 10px;
	image: url(:/images/images/up-arrow1.png); /* 本身图片大小，不拉伸*/
}

/* 朝下箭头 */
QSpinBox::down-arrow{
	width: 10px;
	height: 10px;
	image: url(:/images/images/down-arrow2.png);
}

/* 被禁用时的状态 */
QSpinBox::up-button:disabled, QSpinBox::down-button:disabled{
	background-color: gray;
}