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.

Ardell

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. – Ardell

Answer 1

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!

Ifc

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. – Tuscany

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

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

Answer 2

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;

Bucharest

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

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

Answer 3

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.

Searles

Answer 4

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

Kwiatkowski

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? – Mintamintage

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

Answer 5

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?

Kamila

Answer 6

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

Reckoning

Answer 7

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

Zarah