Changing QCheckBox indicator rectangle color

Question

I'm trying to change only the color of QCheckBox indicator rectangle.

Currently I succeed to draw the right and the bottom line of the rectangle. Probably I'm doing something wrong here.

Here is my code:

CheckBoxWidget.cpp

CheckBoxWidget::CheckBoxWidget(QObject *poParent)
    : QItemDelegate(poParent)
{
}

void CheckBoxWidget::drawCheck( QPainter *painter,
                                const QStyleOptionViewItem &option,
                                const QRect & rect,
                                Qt::CheckState state) const
{
    QRect oCheckBoxRect =
            QApplication::style()->subElementRect( QStyle::SE_CheckBoxIndicator, &option);

    painter->setPen(Qt::white);
    painter->drawRect(oCheckBoxRect);

    QItemDelegate::drawCheck(painter, option, oCheckBoxRect, state);
}

CheckBoxWidget.h

class CheckBoxWidget : public QItemDelegate
{
    Q_OBJECT

public:
    CheckBoxWidget(QObject *poParent = 0);
    virtual ~CheckBoxWidget();

protected:
    virtual void drawCheck( QPainter *painter,
                            const QStyleOptionViewItem &option,
                            const QRect &,
                            Qt::CheckState state) const;
};

Any suggestions ?

score 6 · Answer 1 · answered Jun 07 '15 at 12:55

6

There is no need to create a custom delegate for this. You could use stylesheets in order to change the color of the checkbox or any othe widget as you wish. The following stylesheet will set a gray 3px border to the checkbox rectangle.

QCheckBox::indicator {
    border: 3px solid #5A5A5A;
    background: none;
}

In order to set the stylesheet you could either use the Qt Designer or the setStylesheet function.

In order to set a specific color all of the following are valid:

border: 3px solid #5A5A5A;
border: 3px solid red;
border: 3px solid rgb(255, 120, 100);
border: 3px solid rgba(255,120,100, 50); // For alpha transparency

answered Jun 07 '15 at 12:55

pnezis

12,023
2
38
38

2

The problem with this approach is that it changes the entire appearance of the check box, not just the border color as requested. When setting a custom stylesheet on Qt elements, you need to supply the style for every part of the element. – Anthony Hilyard Dec 23 '15 at 17:30
4

Sadly same issue as above. I set my disabeld qcheckbox background to gray but I no longer see the rest of checkbox - The tick mainly. How can I style tick? Same goes for QRadioButton. Changing style there makes the radio button square :- ( Any ideas where to find info on styling these buttons? – Dariusz Dec 26 '16 at 18:50
Facing the same problem now... Is there any progress on this? – nostradamus Jan 05 '17 at 15:41
The same issue: setting indicator size works, but when I try to set border color checked state looks like unchecked – vitperov Nov 21 '17 at 09:55
If you change one property, you have to set them all. Here is the list of all the properties: http://doc.qt.io/qt-5/stylesheet-examples.html#customizing-qcheckbox – lenooh May 31 '18 at 18:54
3

how is this get upvoted when i cannot see any indicator tick on my checkbox! – greendino Sep 11 '20 at 02:38

Zoempie · Answer 2 · 2022-08-01T21:14:16.270

My solution to this problem was to change the border-color of QCheckBox::indicator and then fix the disappearing tick mark by making the background-color of QCheckBox::indicator:checked act as the visual replacement of the tick mark.

checkBox.setStyleSheet("\
    QCheckBox::indicator { border: 1px solid; border-color: yellow; }\
    QCheckBox::indicator:checked { background-color: green; }\
");

More QCheckBox::indicator:<state>'s can be found here.

score 1 · Answer 3 · answered Mar 29 '19 at 19:59

The simplest way I have been able to figure out is use a QApplication color palette to help change the checkbox indicator color. This makes it so you don't have to override the entire checkbox widget with all the states with QStyle.

This is the type of code that did what I needed

QPalette newPallete = myWidget->palette();
newPallete.setColor(QPalette::Active, QPalette::Background, myWidget->palette().text())
myWidget->setPalette(newPallete)

See this other example with something very similar to styling buttons: Qt5 - setting background color to QPushButton and QCheckBox

score 0 · Answer 4 · answered Sep 09 '21 at 12:56

The solution of @pnezis has the issue that the tick isn't shown anymore.

I fixed this by creating a custom widget, in which I put a QCheckBox (without a label) and a QLabel next to each other.

Then, on the QCheckBox, I call

checkBox.setStyleSheet('background-color: rgba(255, 90, 90, 0.7);')

which changes the colour of the QCheckBox but still displays the tick.

Changing QCheckBox indicator rectangle color

4 Answers4