Qt5 - setting background color to QPushButton and QCheckBox

Question

I'm trying to change the background color of a QAbstractButton (either a QPushButton or QCheckBox) in Qt5 and having zero luck.

This does nothing:

pButton->setAutoFillBackground(true);
QPalette palette = pButton->palette();
palette.setColor(QPalette::Window, QColor(Qt::blue));
pButton->setPalette(palette);
pButton->show();

and if I try changing the style sheet:

pButton->setStyleSheet("background-color: rgb(255,255,0);");

then Qt throws up its hands and draws an afwul-looking blocky button.

There is a page titled "How to change the background color of QWidget" but it just talks about those two methods.

There is also a page "Qt Style Sheets Examples" that implies that if you want to change the background color, you have to take over all aspects of drawing the button, which just seems like overkill.

I need this to run on Mac, Windows, and Ubuntu Linux, and it's really not a happy thing if I have to manually draw everything about the button 3 times (once for each platform).

Am I missing something obvious?

p.s. By "background color" I mean the area surrounding the button, not the color under the text on the face of the button.

I did not ... it seems like if you use the default widgets, Qt "draws" them using a QStyle which is nice because then your widget appears native on all the different platforms, but not so nice because customization is no longer possible. You might be able to create your own QStyle-derived class and somehow piggyback on the QStyle itself, but we decided to just go a completely different direction with our UI, bypassing this limitation. — Betty Crokker, Apr 28 '14 at 15:23

score 24 · Answer 1 · answered Apr 29 '14 at 16:16

24

I had the same issue, but finally got this to work. I'm using Qt 5 with the Fusion color theme:

QPalette pal = button->palette();
pal.setColor(QPalette::Button, QColor(Qt::blue));
button->setAutoFillBackground(true);
button->setPalette(pal);
button->update();

Try these commands in the exact order as above, and if that still doesn't work, set your theme to Fusion and try again.

Good luck!

answered Apr 29 '14 at 16:16

Alchete

1,629
2
18
29

I have tried this on linux and mac. Its strange, i'm using RGB QColor and on linux it does change color but not the one specified, on mac it doesn't at all. I have tried the above commands in that order. – Lightbulb1 May 03 '15 at 12:20
5

If you setFlat(true) on the button it will respond how I would expect. May not be a desirable result for others though. – Lightbulb1 May 03 '15 at 12:35
1

On PyQt, it set like the background but the button is drawn over the back ground. resulting in a very strange effect – Brighter side Apr 22 '18 at 21:18

Nicolai Lissau · Answer 2 · 2020-04-08T08:20:43.047

15

Add propoerty border:none; to the stylesheet

For some reason this removes the default background color also.

Example: background-color: rgba(46, 204, 113, 0.4); border: none;

edited Apr 08 '20 at 08:20

answered Aug 17 '15 at 14:23

Nicolai Lissau

7,298
5
43
57

4

3 years later, I have the same problem with Qt 5.8, Windows 8. This solved it even it is a strange behavior – Phiber Jul 26 '17 at 17:33
This way was easiest for me and worked in Qt 5.12.4 creator using Windows 7. Very bizarre! – cmaceachern Aug 08 '19 at 17:11

abaghiyan · Answer 3 · 2018-02-01T04:07:54.090

14

Try this:

QColor col = QColor(Qt::blue);
if(col.isValid()) {
   QString qss = QString("background-color: %1").arg(col.name());
   button->setStyleSheet(qss);
}

as mentioned at the QT Forum by @goetz.

I used some different definition of Qcolor col as QColor col = QColor::fromRgb(144,238,144); and this works for me.

edited Feb 01 '18 at 04:07

answered Feb 01 '18 at 03:59

abaghiyan

141
1
4

score 11 · Answer 4 · answered Mar 28 '16 at 16:42

11

Changing the Dialog styleSheet Property works for me, set this property to:

QPushButton:pressed {
    background-color: qlineargradient(spread:pad, x1:0, y1:0, x2:0, y2:1,   stop:0 rgba(60, 186, 162, 255), stop:1 rgba(98, 211, 162, 255))
}
QPushButton {
     background-color: #3cbaa2; border: 1px solid black;
     border-radius: 5px;
}

QPushButton:disabled {
    background-color: rgb(170, 170, 127)
}

answered Mar 28 '16 at 16:42

kato2

535
4
15

Hi, I have a `QPushButton` named `myButton` but neither of `myButton->pressed {` nor `myButton { backgroud-color ...` works for it! How do you use these features for a `QPushbutton` in an example please? – Franky Jul 02 '19 at 07:29
you should use #myButton:pressed { or #myButton { in styleSheet property – kato2 Jul 16 '19 at 14:24

score 5 · Answer 5 · answered Apr 11 '18 at 09:32

I found a stupid way, tried every attribute in palette, and it works for me when changing 'QPalette::Base'. Maybe you can have a try.

    pButton->setAutoFillBackground(true);
    QPalette palette = pButton->palette();
    //palette.setColor(QPalette::Window, QColor(Qt.blue));
    //palette.setColor(QPalette::Foreground, QColor(Qt.blue));
    palette.setColor(QPalette::Base, QColor(Qt.blue));
    //palette.setColor(QPalette::AlternateBase, QColor(Qt.blue));
    //palette.setColor(QPalette::ToolTipBase, QColor(Qt.blue));
    //palette.setColor(QPalette::ToolTipText, QColor(Qt.blue));
    //palette.setColor(QPalette::Text, QColor(Qt.blue));
    //palette.setColor(QPalette::Button, QColor(Qt.blue));
    //palette.setColor(QPalette::ButtonText, QColor(Qt.blue));
    //palette.setColor(QPalette::BrightText, QColor(Qt.blue));
    pButton->setPalette(palette);
    pButton->show();

reference link : How to get a stylesheet property?

score 0 · Answer 6 · answered Jul 08 '20 at 14:17

I've struggled with same problem. You need to choose QPalette::Button instead of QPalette::Window. Qt reference says this: QPaletteButton - The general button background color. This background can be different from Window as some styles require a different background color for buttons. So I solved it this way:

        QPalette pal=this->palette(); \\"this" is my derived button class
        pal.setColor(QPalette::Window, style.background);
        QColor col=style.background; \\ my style wrapper, returns QColor
        this->setAutoFillBackground(true);
        this->setPalette(pal);

score 0 · Answer 7 · answered May 13 '22 at 06:09

I want to toggle the color of a button On/Off.

This works for me ...

 QPalette pal = ui->pushButton->palette();
 if (bIn)
    pal.setColor(QPalette::Button, QColor(Qt::green));
 else
    pal.setColor(QPalette::Button, QColor(Qt::red));
  ui->pushButton->setPalette(pal);
  ui->pushButton->setAutoFillBackground(true);
 ui->pushButton->repaint();

I flip the value of bIn on a Clicked Signal/Slot.

void BtnFrame::on_pushButton_clicked()
{
    if (bIn)
        bIn=false;
    else
        bIn=true;
    setColor();
}

Qt5 - setting background color to QPushButton and QCheckBox

7 Answers7

Linked

Related