如何仅通过QSS设置QCheckBox选中区域样式，无需添加qrc资源图片

DevOps 小满

2026-9-25

纯QSS实现黑色背景下带边框QCheckBox的方案

问题原因

你之前的写法导致勾选对勾消失的核心原因是：只要为QCheckBox的::indicator伪元素自定义了任意样式属性，Qt就会完全覆盖默认的indicator绘制逻辑，默认的勾选对勾也会被一并清空，需要手动定义所有状态下的indicator样式、以及勾选状态的对勾样式。

纯QSS实现代码（无需添加qrc资源）

以下样式完全不需要引入外部图片或修改资源配置，直接写入.qss文件即可生效：

QWidget {
    background: #080808;
}

QCheckBox {
    color: white;
    spacing: 8px; /* 调整勾选框和文字的间距 */
}

/* 勾选框基础样式，所有状态通用 */
QCheckBox::indicator {
    width: 16px;
    height: 16px;
    border: 1px solid #5A5A5A;
    border-radius: 2px; /* 可删除去掉圆角 */
    background: transparent;
}

/* 未勾选状态 */
QCheckBox::indicator:unchecked {
    background: transparent;
}

/* 勾选状态 */
QCheckBox::indicator:checked {
    background: transparent;
    /* 内联SVG绘制白色对勾，无需外部资源 */
    image: url(data:image/svg+xml;utf8,<svg width="12" height="10" viewBox="0 0 12 10" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.5 1L4.5 7L1.5 4" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>);
}

/* 可选：半勾选状态样式 */
QCheckBox::indicator:indeterminate {
    background: transparent;
    image: url(data:image/svg+xml;utf8,<svg width="12" height="2" viewBox="0 0 12 2" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="12" height="2" fill="white"/></svg>);
}

/* 可选：交互状态适配 */
QCheckBox::indicator:hover {
    border-color: #808080;
}
QCheckBox::indicator:disabled {
    border-color: #333333;
}
QCheckBox:disabled {
    color: #666666;
}