Stylesheet for QCheckBox - where does the background color come from?

[anr78]

In my QMenu I've added checkable QActions, and I need to style them a bit. As a test I tried:

"QMenu::indicator:non-exclusive:unchecked {"
        "image: url(:/images/icons/checkmark_grey.png);"
        "}"
        "QMenu::indicator:non-exclusive:unchecked:selected {"
        "image: url(:/images/icons/checkmark_grey.png);"
        "}"
        "QMenu::indicator:non-exclusive:checked {"
        "image: url(:/images/icons/checkmark_grey.png);"
        "}"
        "QMenu::indicator:non-exclusive:checked:selected {"
        "image: url(:/images/icons/checkmark_grey.png);"
        "}"
;

"QMenu::indicator:non-exclusive:unchecked {"
        "image: url(:/images/icons/checkmark_grey.png);"
        "}"
        "QMenu::indicator:non-exclusive:unchecked:selected {"
        "image: url(:/images/icons/checkmark_grey.png);"
        "}"
        "QMenu::indicator:non-exclusive:checked {"
        "image: url(:/images/icons/checkmark_grey.png);"
        "}"
        "QMenu::indicator:non-exclusive:checked:selected {"
        "image: url(:/images/icons/checkmark_grey.png);"
        "}"
;

To copy to clipboard, switch view to plain text mode 

The png:
checkmark_grey.png

When I run my code, the color of the checkmark seems to be set from my png, but the background is grey. I thought it would use my entire png. How do I style the background?

If I don't apply this stylesheet, the color of the checkable region follows my QMenu stylesheet:

"QMenu::item::enabled {"
        "color: white;"
        "background-color: rgb(66,66,66);"
        "selection-color: rgb(66,66,66);"
        "selection-background-color: white;"
        "}"

"QMenu::item::enabled {"
        "color: white;"
        "background-color: rgb(66,66,66);"
        "selection-color: rgb(66,66,66);"
        "selection-background-color: white;"
        "}"

To copy to clipboard, switch view to plain text mode 

What I'm basically trying to do is make the color and background of the checkbox follow item colors.

[anr78]

After styling my QMenu, but not QMenu::indicator, my menus look like this:
thefirst.png
thesecond.png
Kinda nice, but with I need to swap colors, and ideally make the black checkmark grey instead.

After adding my own images to QMenu::indicator:
theturd.png
the_fourth.png

When all I wanted to do was change the colors of the checkmarks. Anyone got any ideas about 1) what's wrong, and 2) what I should do?

[Spitfire]

Post some code how you've styled the menu so we can tell you what's wrong and other can benefit from your example.

[anr78]

There's not much more code to post than what I've added above.

The entire stylesheet:

QString MenuStyle =
        "QMenu::item::enabled {"
        "color: white;"
        "background-color: rgb(66,66,66);"
        "selection-color: rgb(66,66,66);"
        "selection-background-color: white;"
        "}"
        "QMenu::item::disabled {"
        "background-color: rgb(66,66,66);"
        "}"
        "QMenu::separator {"
        "height: 1px;"
        "background: lightgrey;"
        "margin-left: 3px;"
        "margin-right: 5px;"
        "}"
        "QMenu::indicator:non-exclusive:unchecked {"
        "image: url(:/images/icons/checkmark_white.png);"
        "}"
        "QMenu::indicator:non-exclusive:checked {"
        "image: url(:/images/icons/checkmark_grey.png);"
        "}"
        "QMenu::indicator:non-exclusive:checked:selected {"
        "image: url(:/images/icons/checkmark_white.png);"
        "}";

QString MenuStyle =
        "QMenu::item::enabled {"
        "color: white;"
        "background-color: rgb(66,66,66);"
        "selection-color: rgb(66,66,66);"
        "selection-background-color: white;"
        "}"
        "QMenu::item::disabled {"
        "background-color: rgb(66,66,66);"
        "}"
        "QMenu::separator {"
        "height: 1px;"
        "background: lightgrey;"
        "margin-left: 3px;"
        "margin-right: 5px;"
        "}"
        "QMenu::indicator:non-exclusive:unchecked {"
        "image: url(:/images/icons/checkmark_white.png);"
        "}"
        "QMenu::indicator:non-exclusive:checked {"
        "image: url(:/images/icons/checkmark_grey.png);"
        "}"
        "QMenu::indicator:non-exclusive:checked:selected {"
        "image: url(:/images/icons/checkmark_white.png);"
        "}";

To copy to clipboard, switch view to plain text mode 

Anything else I can post that would be of help?

[mstegehu]

This works for me so I guess you are doing the right thing.

/*----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*/
QMenu{
    background-color: rgb(58, 69, 91);
    color: rgb(220, 221, 226);
    border: 0px solid red;
    padding: 5px; 
}
 
QMenu::item{
    background-color: transparent; 
    border: 1px solid transparent;
    padding: 2px 25px 2px 20px; 
}
 
QMenu::item:selected{
    background-color: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 rgb(146, 156, 182), stop:1 rgb(88, 99, 121));
    border: 1px solid transparent;
    color: rgb(220, 221, 226);
}
 
QMenu::separator{
   height: 1px;
    color: rgb(220, 221, 226);
   margin: 5px 25px 5px 20px;
}

/*----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*/
QMenu{
    background-color: rgb(58, 69, 91);
    color: rgb(220, 221, 226);
    border: 0px solid red;
    padding: 5px; 
}

QMenu::item{
    background-color: transparent; 
    border: 1px solid transparent;
    padding: 2px 25px 2px 20px; 
}

QMenu::item:selected{
    background-color: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 rgb(146, 156, 182), stop:1 rgb(88, 99, 121));
    border: 1px solid transparent;
    color: rgb(220, 221, 226);
}

QMenu::separator{
   height: 1px;
    color: rgb(220, 221, 226);
   margin: 5px 25px 5px 20px;
}

To copy to clipboard, switch view to plain text mode 

[anr78]

Until I add the QMenu::indicator stuff it works for me too, but then "everything" changes.

[ChrisW67]

Possibly because the white portion of your checkmark image is not transparent so it is overlaying the background when it is painted. Try the attached image: checkmark_grey.png

[anr78]

I will (when I get to work), but that can't be all that happens? If you look at my screenshots, all the colors change when I add the checkmark image.