QT中控件qss样式修改

小宋0012026-05-21 16:41

一、什么是qss?

​ Qt style sheet, 简写就是qss, Qt样式表，不需要用C++代码控件进行重载，就可以修改控件外观，美化界面，类似于前端的css, 但是没有css功能强大.

​ 例如下面QLabel的样式设置

css 复制代码 
QLabel 
{
    background-color: rgb(54,54,54);   /*背景色*/
    color: rgb(230,230,230);           /*字体颜色，前景色*/
    font-family: "Microsoft YaHei";    /*字体类型*/
    font-size: 14px;                   /*字体大小*/         
}

注释形式：

css 复制代码 
 /*我是qss注释*/

除了以上样式外，还有很多，qss千变万化，可以写出各种花里胡哨的样式。

二、常用样式

字体样式

css 复制代码 
font-family: "Microsoft YaHei";
font-size: 14px;
font-style: italic;
font-weight: bold;
color: #123456;

解释如下：

  • font-family ：为设置字体类型，标准形式需要加双引号，不加也可能会生效，具体看系统是否支持，中英文都支持，但要保证字体编码支持，一般程序编码为"utf-8"时没问题。
  • font-size ：为设置字体大小，单位一般使用 px 像素
  • font-style ：为设置字体斜体样式，italic 为斜体， normal 为不斜体
  • font-weight ： 为设置字体加粗样式，bold 为加粗， normal 为不加粗
  • color ：为设置字体颜色，可以使用十六进制数表示颜色，也可以使用某些特殊的字体颜色：red, green, blue 等，或者使用 rgb(r,g,b) 和 rgba(r,g,b,a) 来设置，其中 r、g、b、a 值为0~255，如果想不显示颜色可以设置值为透明 transparent；注意：字体颜色用的是 color 属性，没有 font-color 这个属性

字体也可以一起设置：

css 复制代码 
font: bold italic 18px "Microsoft YaHei";

同时设置字体 style weight size family 的样式时，style(是否斜体) 和 weight (是否加粗)必须出现在开头，size 和 family 在后面，而且 size 必须在 family 之前，否则样式将不生效，

边框样式

css 复制代码 
QLabel 
{
    border-style: solid;
	/*单独设置某一边 border-right-style:dotted;*/
	
	border-width: 2px;
	border-color: red;
}

也可以一起设置

CSS 复制代码 
border: 2px solid red;

​ solid 为实线， dashed 为虚线， dotted 为点线， none 为不显示（如果不设置 border-style 的话，默认带边框）

单独的属性设置

css 复制代码 
border-top-style: solid;
border-top-width: 2px;
border-top-color: red;
border-top: 2px solid red;
border-right-style: solid;
border-right-width: 3px;
border-right-color: green;
border-right: 3px solid green;
border-bottom-style: solid;
border-bottom-width: 2px;
border-bottom-color: blue;
border-bottom: 2px solid blue;
border-left-style: solid;
border-left-width: 3px;
border-left-color: aqua;
border-left: 3px solid aqua;

边框半径(圆角)

css 复制代码 
border-top-left-radius: 5px;
border-top-right-radius: 10px;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 20px;
border-radius: 20px;  /*统一的半径*/

文字位置

在 qss 中，没有对齐方式，只能通过设置 padding 来实现文字的显示位置；一般 padding-left 相当于 x 坐标，padding-top 相当于 y 坐标，设置这两个就可以在任意位置显示了（默认情况下文字是上下左右都居中显示的）

css 复制代码 
padding-left: 10px;
padding-top: 8px;
padding-right: 7px;
padding-bottom: 9px;

背景样式

其它的控件也适用

css 复制代码 
background-color: rgb(54,54,54);
background-image: url(:/imgs/picture/0.png);   /*显示背景图片, 也可以不用引号*/
background-repeat: no-repeat;  /*不重复显示*/
background-position: left center;

解释如下：

  • background-color 为设置背景颜色，可以使用十六进制数表示颜色，也可以使用某些特殊的字体颜色：red, green, blue 等，或者使用 rgb(r,g,b) 和 rgba(r,g,b,a) 来设置，其中 r、g、b、a 值为0~255，如果想不显示颜色可以设置值为透明 transparent
  • background-image 为设置背景图片，图片路径为 url(image-path)
  • background-repeat 为设置背景图是否重复填充背景，如果背景图片尺寸小于背景实际大小的话，默认会自动重复填充图片，可以设置为 no-repeat 不重复，repeat-x 在x轴重复，repeat-y 在y轴重复
  • background-position 为设置背景图片显示位置，只支持 left right top bottom center；值 left right center 为设置水平位置，值 top bottom center 为设置垂直位置

统一设置

css 复制代码 
background: url(":/imgs/picture/0.png") no-repeat left center #363636;

background 为设置背景的所有属性，color image repeat position 这些属性值出现的顺序可以任意

动态悬浮样式

css 复制代码 
QLabel:hover
{
	color: red;
	border-color: green;
    background-color: #363636;
}

禁止使用的样式

css 复制代码 
QLabel:disabled
{
	color: blue;
	border-color: brown;
    background-color: #363636;
}

三、控件应用

QLabel

qss代码

c++ 复制代码 
QLabel {
    font-family: "Microsoft YaHei";
    font-size: 18px;
    color: #BDC8E2;
    font-style: normal;
    font-weight: normal;
 
    border-style: solid;
    border-width: 2px;
    border-color: aqua;
    border-radius: 20px;
 
    padding-left: 20px;
    padding-top: 3px;
 
    background-color: #2E3648;
    background-image: url("./image.png");
    background-repeat: no-repeat;
    background-position: left center;
}

除此之外，我们还可以设置动态样式，鼠标悬浮时的样式

c++ 复制代码 
QLabel:hover
{
    color: red;
    border-color: green;
    background-color: aqua;
}

QLineEdit

常用属性设置

c++ 复制代码 
setReadOnly(false);  // 只读
setFocusPolicy(Qt::NoFocus); // 无法获得焦点

setMaxLength(10); // 最多输入10个字符

文本对齐方式

c++ 复制代码 
lineedit->setAlignment(Qt::AlignLeft)    //左对齐 
lineedit->setAlignment(Qt::AlignRight)   //右对齐  
lineedit->setAlignment(Qt::AlignCenter)  //居中对齐

正则控制

第一个数是1-9的，第二个数和之后的是0-9的

c++ 复制代码 
QRegExp regx("[1-9][0-9]+$");
QValidator *validator = new QRegExpValidator(regx, ui->lineEdit);
lineEdit->setValidator(validator);

qss代码

c++ 复制代码 
QLineEdit{
	border: 1px solid #ABCDA0;      /* 边框宽度为1px，颜色为#A0A0A0 */
	border-radius: 3px;         /* 边框圆角 */
	padding-left: 5px;           /* 文本距离左边界有5px */
	background-color: #F2F2F2;     /* 背景颜色 */
	color: #A0A0A0;     /* 文本颜色 */
	selection-background-color: #A0A0A0;     /* 选中文本的背景颜色 */
	selection-color: #F2F2F2;    /* 选中文本的颜色 */
	font-family: "Microsoft YaHei";    /* 文本字体族 */
	font-size: 10pt;    /* 文本字体大小 */
}

QLineEdit:hover { /* 鼠标悬浮在QLineEdit时的状态 */
	border: 1px solid #298DFF;
	border-radius: 3px;
	background-color: #F2F2F2;
	color: #298DFF;
	selection-background-color: #298DFF;
	selection-color: #F2F2F2;
}

QLineEdit[echoMode="2"] { /* QLineEdit有输入掩码时的状态 */
	lineedit-password-character: 9679;
	lineedit-password-mask-delay: 2000;
}

QLineEdit:disabled { /* QLineEdit在禁用时的状态 */
	border: 1px solid #CDCDCD;
	background-color: #CDCDCD;
	color: #B4B4B4;
}

QLineEdit:read-only { /* QLineEdit在只读时的状态 */
	background-color: #CDCDCD;
	color: #F2F2F2;
}

QPushButton 按钮样式

基本样式

css 复制代码 
QPushButton
{  
    /* 前景色, 文字的颜色 */  
    color:green;  
 
    /* 背景色 */  
    background-color:rgb(223,223,223);  
 
    /* 边框风格 */  
    border-style:outset;  
 
    /* 边框宽度 */  
    border-width:0.5px;  
 
    /* 边框颜色 */  
    border-color:rgb(10,45,110);  
 
    /* 边框倒角 */  
    border-radius:10px;  
 
    /* 字体 */  
    font:bold 22px;  
 
    /* 控件最小宽度 */  
    min-width:100px;  
 
    /* 控件最小高度 */  
    min-height:20px;  
 
    /* 内边距 */  
    padding:4px;  
} 
 
/* 鼠标按下时的效果 */ 
QPushButton#pushButton:pressed 
{  
    /* 改变背景色 */  
    background-color:rgb(40,85,20);  
 
    /* 改变边框风格 */  
    border-style:inset;  
 
    /* 使文字有一点移动 */  
    padding-left:6px;  
    padding-top:6px;  
}
 
/* 按钮样式 */ 
QPushButton:flat 
{  
    border:2px solid red;  
} 
 
/*鼠标悬浮时的效果*/
QPushButton:hover
{
    color:#0000ff;
    background-color:rgb(210, 205, 205); /*改变背景色*/
    border-style:inset;/*改变边框风格*/
    padding-left:8px;
    padding-top:8px;
}

还可以单独指定按钮，用#标明例如：

css 复制代码 
/*鼠标悬浮时的效果*/
QPushButton#btn2:hover
{
    color:#0000ff;
    background-color:rgb(100, 100, 20); /*改变背景色*/
    border-style:inset;/*改变边框风格*/
    padding-left:8px;
    padding-top:8px;
}

相关状态

css 复制代码 
:checked      button部件被选中
:unchecked    button部件未被选中
:disabled     部件被禁用
:enabled      部件被启用
:focus        部件获得焦点
:hover        鼠标位于部件上
:pressed      部件被鼠标按下
:indeterminate    checkbox或radiobutton被部分选中
:off              部件可以切换，且处于off状态
:on               部件可以切换，且处于on状态

禁止使用的样式

当按钮被禁用后 ui->pushButton->setEnabled(false);

css 复制代码 
QPushButton:disabled
{
	color: blue;
	border-color: brown;
    background-color: #363636;
}

qss代码

c++ 复制代码 
QPushButton
{
	background-image:url(":/resources/user.png");
	background-position:center;
	background-repeat: no-repeat;
	border:none
}
 
QPushButton:hover
{
	background-color:rgb(10,210,210);
	background-image:url(":/resources/user_hover.png")
}
 
QPushButton:pressed
{
	background-color:rgb(10,210,210);
	background-image:url(":/resources/user.png");
	padding-left:8px;
    padding-top:8px;
}

水平的QSlider

c++ 复制代码 
QSlider
{
    background-color: #363636; 
	border-style: outset; 
	border-radius: 10px; 
}
 
QSlider::groove:horizontal
{
	height: 12px;
	background: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #B1B1B1, stop:1 #c4c4c4);
	margin: 2px 0
}
 
QSlider::handle:horizontal 
{
	background: QRadialGradient(cx:0, cy:0, radius: 1, fx:0.5, fy:0.5, stop:0 white, stop:1 green);
	width: 16px;
	height: 16px;
	margin: -5px 6px -5px 6px;
	border-radius:11px; 
	border: 3px solid #ffffff;
}

竖直的

c++ 复制代码 
QSlider 
{
	background-color: rgba(22, 22, 22, 0.7);
	padding-top: 15px;  /*上面端点离顶部的距离*/
	padding-bottom: 15px;
	border-radius: 5px; /*外边框矩形倒角*/
}
 
QSlider::add-page:vertical 
{
	background-color: #FF7826;
	width:5px;
	border-radius: 2px;
}
 
QSlider::sub-page:vertical 
{
	background-color: #7A7B79;
	width:5px;
	border-radius: 2px;
}
 
QSlider::groove:vertical 
{
	background:transparent;
	width:6px;
}
 
QSlider::handle:vertical    
{
	height: 14px;  
	width: 14px;
	margin: 0px -4px 0px -4px;
	border-radius: 7px;
	background: white;
}

QComboBox

样式1：

qss代码

c++ 复制代码 
/* 未下拉时，QComboBox的样式 */
QComboBox 
{
    background:rgb(54,54,54);
    border: 1px solid gray;   /* 边框 */
    border-radius: 5px;   /* 圆角 */
    padding: 1px 18px 1px 3px;   /* 字体填衬 */
    color: white;
    font: normal normal 24px "Microsoft YaHei";
}

样式2

qss代码

c++ 复制代码 
/* 未下拉时，QComboBox的样式 */
QComboBox 
{
    border: 1px solid gray;   /* 边框 */
    border-radius: 5px;   /* 圆角 */
    padding: 1px 18px 1px 3px;   /* 字体填衬 */
    color: white;
    font: normal normal 24px "Microsoft YaHei";
    background:rgb(54,54,54);
}

/* 下拉后，整个下拉窗体样式 */
QComboBox QAbstractItemView 
{
    outline: 0px solid gray;   /* 选定项的虚框 */
    border: 1px solid yellow;   /* 整个下拉窗体的边框 */
    color: rgb(250,251,252);
    background-color: rgb(70,80,90);   /* 整个下拉窗体的背景色 */
    selection-background-color: lightgreen;   /* 整个下拉窗体被选中项的背景色 */
}

/* 下拉后，整个下拉窗体每项的样式 */
/* 项的高度（设置pComboBox->setView(new QListView(this));后该项才起作用） */
QComboBox QAbstractItemView::item 
{
    height: 50px;   
}

/* 下拉后，整个下拉窗体越过每项的样式 */
QComboBox QAbstractItemView::item:hover 
{
    color: rgb(90,100,105);
    background-color: lightgreen;   /* 整个下拉窗体越过每项的背景色 */
}

/* 下拉后，整个下拉窗体被选择的每项的样式 */
QComboBox QAbstractItemView::item:selected 
{
    color: rgb(12, 23, 34);
    background-color: lightgreen;
}

/* QComboBox中的垂直滚动条 */
QComboBox QAbstractScrollArea QScrollBar:vertical 
{
    width: 13px;
    background-color: #d0d2d4;   /* 空白区域的背景色*/
}

QComboBox QAbstractScrollArea QScrollBar::handle:vertical 
{
    border-radius: 5px;   /* 圆角 */
    background: rgb(60,60,60);   /* 小方块的背景色深灰lightblue */
}

QComboBox QAbstractScrollArea QScrollBar::handle:vertical:hover 
{
    background: rgb(90, 91, 93);   /* 越过小方块的背景色yellow */
}

/* 设置为可编辑（setEditable(true)）editable时，编辑区域的样式 */
QComboBox:editable 
{
    background: green;
}

/* 设置为非编辑（setEditable(false)）!editable时，整个QComboBox的样式 */
QComboBox:!editable 
{
     background: rgb(54,54,54);
}

/* 设置为可编辑editable时，点击整个QComboBox的样式 */
QComboBox:editable:on 
{
    background: rgb(54,54,54);
}

/* 设置为非编辑!editable时，点击整个QComboBox的样式 */
QComboBox:!editable:on 
{
     background: rgb(54,54,54);
}

/* 设置为可编辑editable时，下拉框的样式 */
QComboBox::drop-down:editable 
{
    background: rgb(54,54,54);
}

/* 设置为可编辑editable时，点击下拉框的样式 */
QComboBox::drop-down:editable:on 
{
    background: rgb(54,54,54);
}

/* 设置为非编辑!editable时，下拉框的样式 */
QComboBox::drop-down:!editable 
{
    background: rgb(54,54,54);
}

/* 设置为非编辑!editable时，点击下拉框的样式 */
QComboBox::drop-down:!editable:on 
{
    background: rgb(54,54,54);
    image: url(:/resources/up.png); /* 显示上拉箭头 */ 
}

/* 下拉框样式 */
QComboBox::drop-down 
{
    subcontrol-origin: padding;   /* 子控件在父元素中的原点矩形。如果未指定此属性，则默认为padding。 */
    subcontrol-position: top right;   /* 下拉框的位置（右上） */
    width: 32px;   /* 下拉框的宽度 */

    border-left-width: 1px;   /* 下拉框的左边界线宽度 */
    border-left-color: darkgray;   /* 下拉框的左边界线颜色 */
    border-left-style: solid;   /* 下拉框的左边界线为实线 */
    border-top-right-radius: 3px;   /* 下拉框的右上边界线的圆角半径（应和整个QComboBox右上边界线的圆角半径一致） */
    border-bottom-right-radius: 3px;   /* 同上 */
    image: url(:/resources/down.png); 
}

/* 越过下拉框样式 */
QComboBox::drop-down:hover 
{
    background: rgb(80, 75, 90);
}

/* 下拉箭头样式 */ 
QComboBox::down-arrow 
{　　
    width: 32px; /* 下拉箭头的宽度（建议与下拉框drop-down的宽度一致） */ 　　
    background: rgb(54,54,54); /* 下拉箭头的的背景色 */ 　　
    padding: 0px 0px 0px 0px; /* 上内边距、右内边距、下内边距、左内边距 */　　
    image: url(:/resources/down.png); 
} 

/* 点击下拉箭头 */ 
QComboBox::down-arrow:on 
{ 　　
    image: url(:/resources/up.png); /* 显示上拉箭头 */ 
}

QProgressBar

水平样式1

QProgressBar默认是水平效果

qss代码

c++ 复制代码 
QProgressBar
{
      background:rgb(54,54,54);
      border:none;   /*无边框*/
      border-radius:5px;
      text-align:center;   /*文本的位置*/
      color: rgb(229, 229, 229);  /*文本颜色*/
}
 
QProgressBar::chunk 
{
      background-color:rgb(58, 154, 255);
      border-radius:4px;
}

chunk表示里面进度的圆角

水平样式2

qss代码

c++ 复制代码 
QProgressBar
{
	border-radius:5px;
	background-color:darkgray;
	text-align:center
}

QProgressBar::chunk
{
	background-color:#1F0FEF;
	width:6px;
	margin:5px;
}

竖直样式表

C++设置

c++ 复制代码 
ui->progressBar_2->setOrientation(Qt::Vertical);
ui->progressBar_2->setFixedWidth(60);
ui->progressBar_2->setFixedHeight(300);

例如下面的效果

qss代码

c++ 复制代码 
QProgressBar:vertical
{
	border-radius:5px;
	background-color:darkgray;
	text-align:center;
	padding-left: 5px; padding-right: 4px; padding-bottom: 2px; 
}

QProgressBar::chunk:vertical
{
	background-color:#06B025;
	margin:1px;
}

其它竖直样式

渐变色

qss代码

c++ 复制代码 
QProgressBar:vertical
{
	border-radius:5px;
	background-color:darkgray;
	text-align:center;
	padding-left: 5px; padding-right: 4px; padding-bottom: 2px; 
}

QProgressBar::chunk:vertical
{
	background-color:QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1,stop: 0 #00ff58,stop: 1 #034f1f);
	margin:1px;
}

QMenu菜单样式

qss代码

css 复制代码 
QMenu::item 
{
     font:16px;
     background-color:rgb(253,253,253);
     padding:8px 32px; 
     margin:0px 8px;
     border-bottom:1px solid #DBDBDB;
}
 
/*选择项设置*/
QMenu::item:selected 
{
     background-color: #FFF8DC;
}

四、qss 选择器

1 通配符选择器

匹配所有的控件，用星号表示

css 复制代码 
* {
        background-color:yellow;
}

设置后控件窗口背景色都被修改了；

或者指明子类

css 复制代码 
* QPushButton{
        background-color:yellow;
}

2 类型选择器

通过控件类型来匹配控件的(包括子类)

css 复制代码 
QWidget {
        background-color:yellow
}

如果想防止子类，例如窗口被修改，可以设置属性

c++ 复制代码 
//禁止父窗口影响子窗口样式
setAttribute(Qt::WA_StyledBackground);

类选择器也是通过控件类型来匹配控件的，但不同的是不包含子类，语法是在类前面加了个.（是个点）

css 复制代码 
.QWidget {
        background-color:yellow
}
注意类前面有个点

这样就只对QWidget生效，如果界面上有其它控件则不生效。

3 ID选择器

ID选择器是结合控件的objectname来匹配控件的，qss里objectname前加个井号来表示，不同控件的objectname是可以相同的

qss 复制代码 
#blue {
        background-color:blue
}

4 属性选择器

属性选择器是结合控件的属性值来匹配控件的，首先要设定控件的属性，qss里属性用proterty = attitude来限制

qt代码

css 复制代码 
label1.setProperty('notice_level','error')
label2.setProperty('notice_level','warning')

qss

qss 复制代码 
.QLabel {
        background-color:pink;
}

.QLabel[notice_level='warning'] {
        border:5px solid yellow;
}

.QLabel[notice_level='error'] {
        border:5px solid red;
}

这里还有个用法，就是qss内只定义属性值，只要有这个属性的控件就可以被选中

复制代码 
.QLabel [notice_level]{
        background-color:pink;
}

.QLabel[notice_level='warning'] {
        border:5px solid yellow;
}

.QLabel[notice_level='error'] {
        border:5px solid red;
}

只要有novice_level这个属性的控价都是生效的。

相关推荐
用户805533698032 天前
不止三件套：QObject 属性系统全关键字与运行时反射!
c++·qt
xcyxiner2 天前
DicomViewer (vcpkg Windows和ubuntu编译)7
qt
Quz7 天前
QML Hello World 入门示例
qt
xcyxiner10 天前
DicomViewer (dcmtk读取dcm文件)5
qt
xcyxiner11 天前
DicomViewer (后台线程处理文件)4
qt
xcyxiner11 天前
DicomViewer (添加模型类)3
qt
xcyxiner12 天前
DicomViewer (目录调整) 2
qt
xcyxiner12 天前
dcmtk vtk vtk-dicom(gdcm) 编译(debug) v2
qt
LDR00614 天前
Type-C 快充全面升级！LDR6601 赋能个人护理便携电机，重塑剃须刀 / 理发器新体验
c语言·开发语言
雪碧聊技术14 天前
Tree.js是什么？一文讲透
开发语言·javascript·ecmascript
热门推荐
012026 年 AI 编程工具终极横评：Cursor vs Claude Code vs Copilot vs Windsurf022026年6月AI大模型全景报告：GPT-5.6、Claude Opus 4.8、Gemini 3.5，中美AI三足鼎立谁主沉浮？032026年6月AI行业全景：从百模大战到Agent元年，这30天发生了什么？04【AI】2026 年具身智能模型和世界模型总结05Claude Code、Codex、Cursor三分天下：2026年AI编程Agent生态全景剖析06Trae国际版与国内版深度测评：AI原生IDE的双生花07飞书长连接_事件订阅（接收消息，审批任务状态变更）082026 AI 编程工具终极实战指南：Cursor vs Claude Code vs Copilot，开发者该怎么选？09GitHub 镜像站点102026年AI架构实战：彻底解决OpenAI接口超时与封号，Python调用GPT-5.2/Sora2企业级架构详解（附源码+压测报告）