Changing QCheckBox indicator rectangle color

26.7k views Asked by At

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 ?

4

There are 4 answers

6
pnezis On

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
0
cmb2200 On

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.

0
scottpetrovic On

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

0
Zoempie On

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.