How to set the size of a QCheckBox's indicator?

Question

This code:

QCheckBox* selection = new QCheckBox(backgroundEditor);
selection->setGeometry(
            0               ,   //Left
            0               ,   //Top
            buttonHeight    ,   //Width
            buttonHeight        //Height
            );
selection->setStyleSheet(QString(
                      "background-color: white;"
                      "           color: black;"
                      "QCheckBox::indicator "
                      "{"
                      "     width: %1px;"
                      "    height: %1px;"
                      "}"
                      ).arg(buttonHeight));

produces:

The white area has the correct geometry, but I want the indicator box (and thus the click-target) to fill it. How do I do that?

---

A bit of experimenting shows that the color specification wipes out the size. Removing it makes the size correct, but of course the colors are wrong. How can I have both?

Answer 1

Try this:

ui->checkBox->setStyleSheet("QCheckBox::indicator {width:10px;height: 10px;}");

you have to set icon manually for each state like this:

QCheckBox::indicator:checked
{
    image: url(../Checkbox_checked_normal.png);
}
QCheckBox::indicator:unchecked
{
    image: url(../Checkbox_unchecked_normal.png);
}

QCheckBox::indicator:checked:hover
{
    image: url(../Checkbox_checked_hovered.png);
}
QCheckBox::indicator:unchecked:hover
{
    image: url(../Checkbox_unchecked_hovered.png);
}
QCheckBox::indicator:checked:pressed
{
    image: url(../Checkbox_checked_pressed.png);
}
QCheckBox::indicator:unchecked:pressed
{
    image: url(../Checkbox_unchecked_pressed.png);
}
QCheckBox::indicator:checked:disabled
{
    image: url(../Checkbox_checked_disabled.png);
}

Image screenshot:

This is a sample project for your question on github download here.

Answer 2

Thanks @aghilpro for eventually getting me to see this, but unfortunately, I can't accept his answer because it hasn't been edited to include the actual problem. (I did upvote it though) So here's what happened:

---

I had used this code because "loose" colors have always worked before - they just applied to every part of the object, which was fine for what I was doing:

QCheckBox* selection = new QCheckBox(backgroundEditor);
selection->setStyleSheet(QString(
                      "background-color: white;"
                      "           color: black;"
                      "QCheckBox::indicator "
                      "{"
                      "     width: %1px;"
                      "    height: %1px;"
                      "}"
                      ).arg(buttonHeight));

As you can see, I just appended my google search results onto what had already worked...and the addition did absolutely nothing because the global specifiers nullified it. Basically, I created a global style that specified the defaults for everything except color, and it overrode the indicator 's local one. Instead, I needed to do this:

QCheckBox* selection = new QCheckBox(backgroundEditor);
selection->setStyleSheet(QString(
                      "QCheckBox"
                      "{"
                      "    background-color: white;"
                      "               color: black;"
                      "}"
                      "QCheckBox::indicator"
                      "{"
                      "     width: %1px;"
                      "    height: %1px;"
                      "}"
                      ).arg(buttonHeight));

Basically, make the colors local to what they're supposed to apply to so that there's no global style at all.

---

If someone has a better insight as to what's actually happening, please let me know so I can fix this answer, or write your own better answer.