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

QSS样式表

1. 子控件
   

2. 常用属性
   

3. 对齐可以组合

    subcontrol-position: top left;
   

QSS示例

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

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

   

2. 对其子控件进行设置：

   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;
   }