How to set QCheckBox checked area stylesheet?

Question

I want to show QCheckBox on black background. I don't want add images to .qrc to configure my own style. I wants to configure style only with .qss. When i try to change the background, all (expect area of checked rect) shows ok So, with my style.qss content:

QWidget {
    background: #080808;
}

QCheckBox {
    color: white;
}

Result is:

As you can see, there is no rect box around of v check mark. So, I try to add to my .qss:

QCheckBox::indicator:checked {
    background: transparent;
    background-color: transparent;
    color: white;
    border: 1px solid #5A5A5A;
}

But this removes v, so checked state shows with box area, but without v-marker, as if the state is unchecked:

I have the impression that the box has a fill that overwrites v check marker. How to draw box around v check marker?

Update. I fix this by modify palette of my QCheckBox:

void MyWidget::fixPalette(){
    QPalette p = ui->autoScrollCheckBox->palette();
    p.setColor(QPalette::Window, Qt::gray);
    ui->autoScrollCheckBox->setPalette(p);
}

Result of checked state:

But how to do this only with stylesheets?

Answer 1

I used stylesheets on QWidget to globally apply a ridiculously large "metallic" look to a control GUI that uses a touchscreen. Had to do a LOT of work to get combo boxes and scrollboxes to look reasonable afterwards... QRadioButton and QCheckBox also got wiped out.

For me, I had to set the new values for the following (X is either QRadioButton or QCheckBox, and the number of :'s is important, though it mostly looks like a typo to me. stylesheets are not my favorite language)

• X::indicator (width, height, background-color, border-radius, border-style, border-width, and border-color to fix the general radio/checkbox area)

• X::indicator:checked (I had to set up background-color with a qradialgradient for my scheme, but generally a solid color should work)

• X:checked, X::indicator:checked (for me, I changed my border-color, because I'm simulating an LED... This is specifically for the X::indicator:checked of a X:checked widget)

• X:checked (I changed the background-color to a qradialgradient of bright green for my LED)

For what it's worth, I put my actual radio/checkbox settings at the bottom of this post.

I went with the LED approach partially because it fit with my overall theme, and partially because I don't think I ever figured out how to fix the actual radio/check image. I do know that in QComboBox, I had to provide my own PNG for a sub-control as soon as I did anything to the main control's style. Not sure why. I also remember having trouble finding out the proper names for the subcontrols. But if you can find them, then something like the following may help ("plus30x30.png" is just a file in my project... I'm doing this in a .ui file that I load from Python, so there may be different path requirements in other language bindings).

QComboBox::down-arrow {
    image-position: center center;
    image: url(plus30x30.png)
}

I hope something in there helps at least a little.

----- the promised ridiculous style settings -----

QCheckBox::indicator {
    width: 30px;
    height: 30px;
    background-color: gray;
    border-radius: 15px;
    border-style: solid;
    border-width: 1px;
    border-color: white white black black;
}
QCheckBox::indicator:checked {
    background-color: qradialgradient(spread:pad, 
                            cx:0.5,
                            cy:0.5,
                            radius:0.9,
                            fx:0.5,
                            fy:0.5,
                            stop:0 rgba(0, 255, 0, 255), 
                            stop:1 rgba(0, 64, 0, 255));
}
QCheckBox:checked, QCheckBox::indicator:checked {
    border-color: black black white white;
}
QCheckBox:checked {
    background-color: qradialgradient(spread:pad, 
                            cx:0.739, 
                            cy:0.278364, 
                            radius:0.378, 
                            fx:0.997289, 
                            fy:0.00289117, 
                            stop:0 rgba(255, 255, 255, 255), 
                            stop:1 rgba(160, 160, 160, 255));
}