qss样式表笔记大全(三)：可设置样式的窗口部件列表（中）（持续更新示例）

原创

长沙红胖子Qt 2022-04-20 14:43:06 博主文章分类：Qt开发 ©著作权

文章标签 qss定制部件 qss 可视化定制 qss样式大全样式表 文章分类 代码人生

©著作权归作者所有：来自51CTO博客作者长沙红胖子Qt的原创作品，请联系作者获取转载授权，否则将追究法律责任

若该文为原创文章，转载请注明原文出处

红胖子(红模仿)的博文大全：开发技术集合（包含Qt实用技术、树莓派、三维、OpenCV、OpenGL、ffmpeg、OSG、单片机、软硬结合等等）持续更新中...（点击传送门）

Qt开发专栏：qss样式表笔记大全（点击传送门）

上一篇：《qss样式表笔记大全(二)：可设置样式的窗口部件列表（上）（持续更新示例）》下一篇：《qss样式表笔记大全(四)：可设置样式的窗口部件列表（下）（持续更新示例）》

前话

Qt的qss样式详解与Demo

可设置样式的窗口部件列表

QLabel

窗口部件	样式表使用方式
QLabel	支持盒模式。不支持:hover状态。从4.3后，设置一个QLable的样式表，会自动设置QFrame:frameStyle属性为值QFrame:StyledPanel。注意：text-align对齐方式只对QPushButton有效

示例：QToolTip定制

QFrame, QLabel, QToolTip{
    border: 2px solid green; /* border: 宽度 线类型 颜色 */
    border-radius: 4px;
    padding: 2px; /* 边界都内部矩形的宽度 */
background-image: url(E:/1.jpg);
}

qss样式表笔记大全(三)：可设置样式的窗口部件列表（中）（持续更新示例）_样式表_02

QLineEdit

窗口部件	样式表使用方式
QLineEdit	支持盒模式。被选中的内容部分的前景色和背景需要通过属性selection-color和selection-background-color控制。密码字符可以通过属性lineedit-password-character属性控制。密码掩码可以通过属性lineeedit-password-mask-delay属性控制。

示例：QLineEdit定制（选中，密码输入，只读）

QLineEdit {
    border: 2px solid gray;
    border-radius: 10px;
    padding: 0 8px;
    background: yellow;
    selection-background-color: darkgray;
}

qss样式表笔记大全(三)：可设置样式的窗口部件列表（中）（持续更新示例）_qss_04

/* 输入模式echoMode */
/* echoMode为 0(Normal) | 1(NoEcho) | 2(Password) | 3 (PasswordEchoOnEdit) */
QLineEdit[echoMode="2"] {
    lineedit-password-character: 42; /* ascii:* */
}

qss样式表笔记大全(三)：可设置样式的窗口部件列表（中）（持续更新示例）_可视化定制_05

运行起来可能变成了圆形，如下图：

qss样式表笔记大全(三)：可设置样式的窗口部件列表（中）（持续更新示例）_可视化定制_06

经过仔细研究，得出结论：在笔者win10记本上，echoMode枚举Password值为2，但在运行的时候，运行值却是0，代码和图如下：

QLineEdit[echoMode="0"] {
    lineedit-password-character: 42; /* ascii:* */
}

qss样式表笔记大全(三)：可设置样式的窗口部件列表（中）（持续更新示例）_qss_07

/* 只读状态 */
QLineEdit:read-only {
    background: lightblue;
}

qss样式表笔记大全(三)：可设置样式的窗口部件列表（中）（持续更新示例）_样式表_08

示例：QLineEdit定制（没有焦点且有内容的时候，不显示边框；有焦点或者无焦点但是有内容的时候显示边框）

qss样式表笔记大全(三)：可设置样式的窗口部件列表（中）（持续更新示例）_可视化定制_09

#include "LineEdit2.h"
#include <QDebug>

LineEdit2::LineEdit2(QWidget *parent)
    : QLineEdit(parent)
{
    setPlaceholderText("请输入信息");
    // 样式为：边框蓝色、圆角、文字间隔、背景透明
    _focusInQss = QString("QLineEdit {"
                          "    border:2px groove rgb(156, 185, 219);"
                          "    border-radius:10px;"
                          "    padding:2px 4px;"
                          "    background-color: rgba(0, 0, 0, 0);"
                          "};");
    // 样式为：边框透明、文字间隔、背景透明
    _focusOutQss = QString("QLineEdit {"
                           "    border: 2px groove rgb(255, 255, 255, 0);"
                           "    border-radius:10px;"
                           "    padding:2px 4px;"
                           "    background-color: rgba(0, 0, 0, 0);"
                           "};");
    setStyleSheet(_focusInQss);
    setAlignment(Qt::AlignCenter);
}

void LineEdit2::focusInEvent(QFocusEvent *event)
{
    setStyleSheet(_focusInQss);
    QLineEdit::focusInEvent(event);
}

void LineEdit2::focusOutEvent(QFocusEvent *event)
{
    if(text().isEmpty())
    {
        setStyleSheet(_focusInQss);
    }else{
        setStyleSheet(_focusOutQss);
    }
    QLineEdit::focusOutEvent(event);
}

QListView

窗口部件	样式表使用方式
QListView	支持盒模式。当alternating row colors属性设置为允许时，交替颜色可通过属性alternate-background-color控制。被选中的内容部分的前景色和背景需要通过属性selection-color和selection-background-color控制。选择的行为可以在这里通过属性show-decoration-selected属性控制。通过子控件-项，可以更精确的控制items，通过::item控制。背景可滚动，可参照QAbstractScrollArea窗口部件。

示例：QListView定制（注：QListView列表项需要代码加入）

/* altermate-background生效条件： ui->listView->setAlternatingRowColors(true); */
/* 此处alternate-background-color: yellow会被QListView::item:alternate覆盖*/
QListView {
    alternate-background-color: yellow; 
}
QListView {
show-decoration-selected: 1; /* make the selection span the entire width of the view */
}
/* 此处QListView::item:alternate覆盖会alternate-background-color: yellow属性*/
QListView::item:alternate {
    background: #EEEEEE; /* item交替变换颜色，如图中灰色 */
}
QListView::item:selected {
border: 1px solid #6a6ea9;
}
QListView::item:selected:!active {
    background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                             stop: 0 #ABAFE5, 
                             stop: 1 #8588B2);
}
QListView::item:selected:active {
    background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                             stop: 0 #6a6ea9, 
                             stop: 1 #888dd9);
}
QListView::item:hover {
    background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                             stop: 0 #FAFBFE, 
                             stop: 1 #DCDEF1);
}

qss样式表笔记大全(三)：可设置样式的窗口部件列表（中）（持续更新示例）_qss定制部件_12

QListWidget（参照QListView）

窗口部件	样式表使用方式
QListWidget	参照QListView

QMainWindow

窗口部件	样式表使用方式
QMainWindow	支持样式分隔。当使用QDockWidget样式使用::separator子控件。

示例：QMainWindow与QDockWidget定制分隔条（非QSplitter）

QMainWindow::separator {
    background: yellow;
    width: 10px; /* when vertical */
    height: 10px; /* when horizontal */
}
QMainWindow::separator:hover {
    background: red;
}

qss样式表笔记大全(三)：可设置样式的窗口部件列表（中）（持续更新示例）_qss定制部件_14

QMenu

窗口部件	样式表使用方式
QMenu	支持盒模式。每一项都可以使用::item子控件控制，且一般都支持以下状态：:selected，:default，:exclusive，:non-exclusive。可选择菜单项的指示器可使用::indicator子控件控制。分隔符可使用::separator控制。如果菜单项有子项，箭头标记可使用子控件：::right-arrow和::left-arrow控制。滚动条可以通过::scroller控制。一触就显示的菜单(tear-off)可以通过::tearoff控制。

示例：QMenu定制

QMenu {
    background-color: #ABABAB; /* sets background of the menu */
    border: 1px solid black;
}

QMenu::item {
    /* sets background of menu item. set this to something non-transparent
       if you want menu color and menu item color to be different */
    background-color: transparent;
}

QMenu::item:selected { 
    /* when user selects item using mouse or keyboard */
    background-color: #654321;
}

qss样式表笔记大全(三)：可设置样式的窗口部件列表（中）（持续更新示例）_qss定制部件_16

QMenu {
    background-color: white;
    margin: 2px; /* some spacing around the menu */
}
QMenu::item {
    padding: 2px 25px 2px 20px;
    border: 1px solid transparent; /* reserve space for selection border */
}
QMenu::item:selected {
    border-color: darkblue;
    background: rgba(100, 100, 100, 150);
}
QMenu::icon:checked { /* appearance of a 'checked' icon */
    background: gray;
    border: 1px inset gray;
    position: absolute;
    top: 1px;
    right: 1px;
    bottom: 1px;
    left: 1px;
}
QMenu::separator {
    height: 2px;
    background: lightblue;
    margin-left: 10px;
    margin-right: 5px;
}
QMenu::indicator {
    width: 13px;
    height: 13px;
}
/* non-exclusive indicator = check box style indicator (see QActionGroup::setExclusive) */
QMenu::indicator:non-exclusive:unchecked {
    background-color: rgb(255,0,0,100);
}
QMenu::indicator:non-exclusive:unchecked:selected {
    background-color: rgb(255,0,0,180);
}
QMenu::indicator:non-exclusive:checked {
    background-color: rgb(255,0,0,255);
}
QMenu::indicator:non-exclusive:checked:selected {
    background-color: rgb(0,0,0, 100);
}
/* exclusive indicator = radio button style indicator (see QActionGroup::setExclusive) */
QMenu::indicator:exclusive:unchecked {
    background-color: rgb(0,255,0, 100);
}
QMenu::indicator:exclusive:unchecked:selected {
    background-color: rgb(0,255,0,180);
}
QMenu::indicator:exclusive:checked {
    background-color: rgb(0,255,0, 255);
}
QMenu::indicator:exclusive:checked:selected {
    background-color: rgb(0,0,0, 100);
}

qss样式表笔记大全(三)：可设置样式的窗口部件列表（中）（持续更新示例）_qss定制部件_17

QMenuBar

窗口部件	样式表使用方式
QMenuBar	支持盒模式。通过spacing属性控制菜单项之间的距离。菜单项进一步定制可通过::item。警告：当在Qt/Mac，菜单栏通常被嵌入到系统工具条，这将导致设置的样式失败。

示例：QMenuBar定制

QMenuBar {
    background-color: qlineargradient(x1:0, y1:0, x2:0, y2:1,
                                 stop:0 lightgray, 
                                 stop:1 darkgray);
}
QMenuBar::item {
    spacing: 3px; /* spacing between menu bar items */
    padding: 1px 4px;
    background: transparent;
    border-radius: 4px;
}
QMenuBar::item:selected { /* when selected using mouse or keyboard */
    background: #a8a8a8;
}
QMenuBar::item:pressed {
    background: #888888;
}

qss样式表笔记大全(三)：可设置样式的窗口部件列表（中）（持续更新示例）_样式表_19

QMessageBox（此处仅文本交互）

窗口部件	样式表使用方式
QMessageBox	属性messagebox-text-interaction-flags用于更改消息框中与文本的交互。（5为可选）

示例：QMessageBox定制（文本交互）

QMessageBox { 
    messagebox-text-interaction-flags: 5; /* 5为可选中, 缺省为不可选中 */
}

qss样式表笔记大全(三)：可设置样式的窗口部件列表（中）（持续更新示例）_qss定制部件_20

QProgressBar

窗口部件	样式表使用方式
QProgressBar	支持盒模式。进度条的方块可以通过::chunk控制，方块会显示在内容矩形上，即盒模式中的content rectangle。如果进度条要显示文字，那么使用text-align属性定位文本。不确定状态由::indeterminate控制。

示例1：QProgressBar定制

qss样式表笔记大全(三)：可设置样式的窗口部件列表（中）（持续更新示例）_可视化定制_22

QProgressBar {
    border: 2px solid grey;
    border-radius: 5px;
    text-align: center;
}
QProgressBar::chunk {
    background-color: #05B8CC;
    width: 20px;
}

QProgressBar {
    border: 2px solid grey;
    border-radius: 5px;
}
QProgressBar::chunk {
    background-color: #05B8CC;
    width: 20px;
}
QProgressBar {
    border: 2px solid grey;
    border-radius: 5px;
    text-align: center;
}
/* 对之前的例子，增加了方块部分 */
QProgressBar::chunk {
    background-color: #CD96CD;
    width: 10px;
    margin: 0.5px;
}

示例2：QProgressBar定制（2021年05月07日补充）

qss样式表笔记大全(三)：可设置样式的窗口部件列表（中）（持续更新示例）_可视化定制_24

/* 安装进度条 */
QProgressBar {
  border-image: url(:/images/progressBarBackground.png);  
}
QProgressBar::chunk {
  border-image: url(:/images/progressBarFrontground.png);
}

QPushButton

窗口部件	样式表使用方式
QPushButton	支持盒模式。支持:default，:flat，:checked, :hoverd, :disabled状态。如果QPushButton拥有菜单，则菜单指示器可以通过::menu-indicator控制。如果QPushButton拥有菜单，则有:open，:close状态可控制。警告：如果设置了背景颜色(background-color)，背景可能不会生效除非设置border属性为某些值。这是因为，默认QPushbutton会绘制一个凸出的边框会完全覆盖背景颜色。例如： QPushButton{ background-color: red; border: none; }

示例1：QPushButton定制（外观渐进色，有子菜单，圆角）

qss样式表笔记大全(三)：可设置样式的窗口部件列表（中）（持续更新示例）_qss_26

QPushButton {
    border: 2px solid #8f8f91;
    border-radius: 6px;
    background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                  stop: 0 #f6f7fa,
                                  stop: 1 #dadbde);
    min-width: 80px;
}
QPushButton:pressed {
    background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                  stop: 0 #dadbde, 
                                  stop: 1 #f6f7fa);
}
QPushButton:flat {
    border: none; /* no border for a flat push button */
}
QPushButton:default {
    border-color: navy; /* make the default button prominent */
}
/* 从这往下，因为未做按钮菜单，效果未提现 */
QPushButton:open { /* when the button has its menu open */
    background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                  stop: 0 #dadbde, 
                                  stop: 1 #f6f7fa);
}
QPushButton::menu-indicator {
    Image: url(menu_indicator.png);
    subcontrol-origin: padding;
    subcontrol-position: bottom right;
}
QPushButton::menu-indicator:pressed, QPushButton::menu-indicator:open {
    position: relative;
    top: 2px; left: 2px; /* shift the arrow by 2 px */
}

示例2：QPushButton双图，设置background-image，下面还有broder

qss样式表笔记大全(三)：可设置样式的窗口部件列表（中）（持续更新示例）_qss样式大全_27

background: url(:/images/mainWindow/lowSpeed.png) no-repeat center center;

示例3：QPushButton工控三状态（2021年5月1日补充）

qss样式表笔记大全(三)：可设置样式的窗口部件列表（中）（持续更新示例）_qss_28

* {
  font: bold 48px "黑体";
}
QWidget#page_main {
  background-color: rgb(40, 140, 255);
}
QPushButton {
  background-color: rgb(0, 60, 100);
  border-width: 4px; 
  border-color: rgb(200, 200, 200);
  border-style: outset;  
  color: white;
}
QPushButton::hover {
  background-color: rgb(0, 60, 100);
  border-width: 6px; 
  border-color: rgb(160, 160, 160);
  border-style: inset;  
  color: white;
}
QPushButton::pressed {
  background-color: rgb(0, 60, 100);
  border-width: 10px; 
  border-color: rgb(100, 100, 100);
  border-style: inset;  
  color: white;
}

示例4：三色浅绿系列定制（2021年06月10日补充）

qss样式表笔记大全(三)：可设置样式的窗口部件列表（中）（持续更新示例）_qss_29

QPushButton {
  border: none;
  border-radius: 6px;
  font-size: 17px;
  color: white;
  background-color: rgba(87, 175, 171, 255);
}
QPushButton:disabled {
  background-color: rgba(154, 206, 205, 255);
}
QPushButton:pressed,
QPushButton:checked {
  color: white;
  background-color:  rgba(37, 130, 122, 255);
}

QRadioButton

窗口部件	样式表使用方式
QRadioButton	支持盒模式。选择指示器使用::indicator控制。默认的，指示器显示在content rectangle的左上角。 spacing属性可控制indicator与text之间的距离。

示例：QRadioButton定制

QRadioButton::indicator {
    width: 13px;
    height: 13px;
}
QRadioButton::indicator::unchecked {
    /* image: url(:/images/radiobutton_unchecked.png); */
    background-color: rgb(255,0,0,60);
}
QRadioButton::indicator:unchecked:hover {
    /* image: url(:/images/radiobutton_unchecked_hover.png); */
    background-color: rgb(255,0,0,120);
}
QRadioButton::indicator:unchecked:pressed {
    /* image: url(:/images/radiobutton_unchecked_pressed.png); */
    background-color: rgb(255,0,0,180);
}
QRadioButton::indicator::checked {
    /* image: url(:/images/radiobutton_checked.png); */
    background-color: rgb(0,255,0,60);
}
QRadioButton::indicator:checked:hover {
    /* image: url(:/images/radiobutton_checked_hover.png); */
    background-color: rgb(0,255,0,120);
}
QRadioButton::indicator:checked:pressed {
    /* image: url(:/images/radiobutton_checked_pressed.png); */
    background-color: rgb(0,255,0,180);
}

qss样式表笔记大全(三)：可设置样式的窗口部件列表（中）（持续更新示例）_可视化定制_31

QScrollBar

窗口部件	样式表使用方式
QScrollBar	支持盒模式。 content rectangle是滑动区域。 QScrollBar（其宽度和高度依赖于滚动条的方向）的程度可分别被width和height属性设置。确定QScrollBar方向，通过:horizontal和:vertical状态控制。滑块可以使用::handle定制。根据滑块的方向，可设置min-width或min-height属性。拥有子控件-增加线，可通过::add-line控制。默认增加线是放在border rectangle的右上角。增加线拥有箭头控件，依赖方向可使用::right-arrow或::down-arrow控制，默认箭头会放在增加线控件的content rectangle中间。拥有子控件-减少线，可通过::sub-line控制。默认减少线是放在border rectange的右下角。减少线拥有箭头控件，依赖方向可使用::left-arrow或::up-arrow控制，默认箭头会放在下划线控件的content rectangle中间。拥有子控件-减少页，通过::sub-page控制减去页面区域。拥有子空间-增加也，通过::add-page控制增加页面区域。

示例1：QScrollBar定制（垂直为主例，水平为辅例）

qss样式表笔记大全(三)：可设置样式的窗口部件列表（中）（持续更新示例）_样式表_34

QScrollBar:horizontal {
    border: 2px solid black;
    background: red; /* 自带白底色，导致白红白红背景 */
    height: 15px;
    /* 上 左 下 右 */
    margin: 2px 22px 2px 22px;
}
QScrollBar::handle:horizontal {
    background: rgb(0,0,255);
    min-width: 10px;
}
QScrollBar::sub-line:horizontal {
    border: 2px solid grey;
    background: rgb(0,255,0);
    width: 20px;
    subcontrol-position: left;
    subcontrol-origin: margin;
}
QScrollBar::add-line:horizontal {
    border: 2px solid grey;
    background: rgb(255,0,0);
    width: 20px;
    subcontrol-position: right;
    subcontrol-origin: margin;
}

qss样式表笔记大全(三)：可设置样式的窗口部件列表（中）（持续更新示例）_qss样式大全_35

QScrollBar:horizontal {
    border: 2px solid black;
    background: red;
    height: 15px;
    /* 上 左 下 右 */
    margin: 2px 22px 2px 22px;
}
QScrollBar::handle:horizontal {
    background: rgb(0,0,255);
    min-width: 10px;
}
QScrollBar::sub-line:horizontal {
    border: 2px solid grey;
    background: rgb(0,255,0);
    width: 20px;
    subcontrol-position: left;
    subcontrol-origin: margin;
}
QScrollBar::add-line:horizontal {
    border: 2px solid grey;
    background: rgb(255,0,0);
    width: 20px;
    subcontrol-position: right;
    subcontrol-origin: margin;
}
/* 比紧邻上面的示例多的代码部分 */
QScrollBar:left-arrow:horizontal {
    border: 2px solid grey;
    width: 5px;
    height: 5px;
    background: while;
}
QScrollBar::add-page:horizontal{
    background: none;
}

qss样式表笔记大全(三)：可设置样式的窗口部件列表（中）（持续更新示例）_qss样式大全_36

QScrollBar:horizontal {
    border: 2px solid green;
    background: cyan;
    height: 15px;
    margin: 0px 40px 0 0px;
}
QScrollBar::handle:horizontal {
    background: gray;
    min-width: 20px;
}
QScrollBar::add-line:horizontal {
    background: blue;
    width: 16px;
    subcontrol-position: right;
    subcontrol-origin: margin;
    border: 2px solid black;
}
QScrollBar::sub-line:horizontal {
    background: magenta;
    width: 16px;
    subcontrol-position: top right; /* 减少线(块)定位位置 */
    subcontrol-origin: margin;
    border: 2px solid black;
    position: absolute;
    right: 20px;
}
QScrollBar:left-arrow:horizontal, QScrollBar::right-arrow:horizontal {
    width: 3px;
    height: 3px;
    background: pink;
}
QScrollBar::add-page:horizontal, QScrollBar::sub-page:horizontal {
    background: none;
}

示例2：QScrollBar定制（垂直为主例，水平为辅例）

qss样式表笔记大全(三)：可设置样式的窗口部件列表（中）（持续更新示例）_可视化定制_37

QScrollBar:vertical {
    border: 2px solid grey;
    background: #32CC99;
    width: 15px;
    margin: 22px 0 22px 0;
}
QScrollBar::handle:vertical {
    background: white;
    min-height: 20px;
}
QScrollBar::add-line:vertical {
    border: 2px solid grey;
    background: #32CC99;
    height: 20px;
    subcontrol-position: bottom;
    subcontrol-origin: margin;
}
QScrollBar::sub-line:vertical {
    border: 2px solid grey;
    background: #32CC99;
    height: 20px;
    subcontrol-position: top;
    subcontrol-origin: margin;
}
QScrollBar::up-arrow:vertical, QScrollBar::down-arrow:vertical {
    border: 2px solid grey;
    width: 3px;
    height: 3px;
    background: white;
}
QScrollBar::add-page:vertical, QScrollBar::sub-page:vertical {
    background: none;
}

示例3：水平滚动条定制（无法定制滑块最大宽度：小于标准宽度无法更小）

qss样式表笔记大全(三)：可设置样式的窗口部件列表（中）（持续更新示例）_样式表_38

/* 水平滚动条 */
QScrollBar:horizontal {
    border: 0px solid black;
    background: rgba(239, 238, 237, 255); /* 自带白底色，导致白红白红背景 */
    height: 26px;
    /* 上 左 下 右 */
    margin: 0px 28px 0px 28px;
}
/* 两端按钮 */
QScrollBar::sub-line:horizontal {
    border: 0px solid grey;
    background: rgb(0, 233, 215);
    width: 28px;
    subcontrol-position: left;
    subcontrol-origin: margin;
    border-image: url(:/scanWidget/images/baseSurface/sub.png);
    
}
QScrollBar::add-line:horizontal {
    border: 0px solid grey;
    background: rgb(255,0,0);
    width: 28px;
    subcontrol-position: right;
    subcontrol-origin: margin;
    border-image: url(:/scanWidget/images/baseSurface/add.png);
}
/* 加减区域的背景色 */
QScrollBar::sub-page:horizontal  {
    width: 35px;
    height: 10px;
    background: rgb(183, 233, 215); 
}
QScrollBar::add-page:horizontal  {
    width: 35px;
    height: 10px;
    background: rgb(240,240,240);
}
/* 滑块: 无法设置小于标准宽度小的宽度 */
QScrollBar::handle:horizontal {
    background: rgba(53,143,134,255);
    min-width: 6px;
    border: 0px solid rgba(0,0,0,0);
    margin: 0 0 0 0;
}

示例4：灰色简单系列定制（2021年6月15日补充）

qss样式表笔记大全(三)：可设置样式的窗口部件列表（中）（持续更新示例）_样式表_45

/* 纯色滚动条定制 */
QScrollBar:vertical {
    border: 0px solid rgb(88, 183, 179);
    background: rgba(255, 255, 255, 25);
    min-width: 8px;
    max-width: 8px;
    margin: 10 0 10 0;
    border-radius: 4px;
}
QScrollBar::handle:vertical {
    background: rgba(255, 255, 255, 40);
    border-radius: 4px;
}
QScrollBar::add-page,
QScrollBar::sub-page{
    background: transparent;
}
QScrollBar::add-line,
QScrollBar::sub-line{
    background: transparent;
}

示例5：水平滚动条定制（2021年06月21日补充）

qss样式表笔记大全(三)：可设置样式的窗口部件列表（中）（持续更新示例）_qss定制部件_46

/* 纯色滚动条定制 */
QScrollBar:horizontal  {
    border: 0px solid rgb(88, 183, 179);
    background: rgb(214, 214, 214);
    min-height: 12px;
    max-height: 12px;
    margin: 20 0 10 0;
    border-radius: 4px;
}
QScrollBar::handle:horizontal {
    background: rgb(45, 86, 150);
    border-radius: 4px;
}
QScrollBar::add-page,
QScrollBar::sub-page{
    background: transparent;
}
QScrollBar::add-line,
QScrollBar::sub-line{
    background: transparent;
}

上一篇：《qss样式表笔记大全(二)：可设置样式的窗口部件列表（上）（持续更新示例）》
下一篇：《qss样式表笔记大全(四)：可设置样式的窗口部件列表（下）（持续更新示例）》

若该文为原创文章，转载请注明原文出处

上一篇：项目实战：Qt并发服务器通讯，受同一时刻最大线程数限制（笔者本本同一时刻600多）

下一篇：关于 win10远程桌面(家庭版)无法连接的傻瓜式解决方法

提问和评论都可以，用心的回复会被更多人看到评论

发布评论

相关文章

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯