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);"
"}"
;

The png:
7032

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;"
"}"


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:
7042
7043
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:
7044
7045

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);"
"}";

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;
}

[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: 7051

[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.