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
– Betty Crokker, Commented Apr 28, 2014 at 15:23

Alchete · Accepted Answer · 2014-04-29 16:16:15Z

26

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, 2014 at 16:16

Alchete

1,6492 gold badges19 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Lightbulb1 Over a year ago

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 Over a year ago

If you setFlat(true) on the button it will respond how I would expect. May not be a desirable result for others though.

Brighter side Over a year ago

On PyQt, it set like the background but the button is drawn over the back ground. resulting in a very strange effect

Nicolai Lissau · Accepted Answer · 2020-04-08 08:20:43Z

17

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 8, 2020 at 8:20

answered Aug 17, 2015 at 14:23

Nicolai Lissau

8,4327 gold badges52 silver badges61 bronze badges

4 Comments

Phiber Over a year ago

3 years later, I have the same problem with Qt 5.8, Windows 8. This solved it even it is a strange behavior

cmaceachern Over a year ago

This way was easiest for me and worked in Qt 5.12.4 creator using Windows 7. Very bizarre!

Youda008 Dec 31, 2024 at 11:24

quite ridiculous that this is the only way to make it work with the default Windows theme

Nicolai Lissau Jan 3 at 22:09

Even more so that it's seems to be the same after 8.5 years...

abaghiyan · Accepted Answer · 2018-02-01 04:07:54Z

15

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 1, 2018 at 4:07

answered Feb 1, 2018 at 3:59

abaghiyan

1591 silver badge4 bronze badges

Comments

kato2 · Accepted Answer · 2016-03-28 16:42:02Z

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, 2016 at 16:42

kato2

6116 silver badges17 bronze badges

2 Comments

Franky Over a year ago

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?

kato2 Over a year ago

you should use #myButton:pressed { or #myButton { in styleSheet property

whisper · Accepted Answer · 2018-04-11 09:32:13Z

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?

goodle06 · Accepted Answer · 2020-07-08 14:17:02Z

0

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

answered Jul 8, 2020 at 14:17

goodle06

111 silver badge3 bronze badges

Comments

Tim Seed · Accepted Answer · 2022-05-13 06:09:24Z

0

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

answered May 13, 2022 at 6:09

Tim Seed

5,2872 gold badges32 silver badges27 bronze badges

Collectives™ on Stack Overflow

Qt5 - setting background color to QPushButton and QCheckBox

7 Answers 7

3 Comments

4 Comments

Comments

2 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

3 Comments

4 Comments

Comments

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related