c++qtqtstylesheetsqprogressbar

Changing QProgressBar background-color does not work


I'm creating a Qt widget application.

In Qt Designer, my QProgressBar looks like this:

how qt progress bar should look

I set different colors for background and chunk, but when I run my application, background-color doesn't show properly:

how it actually looks

I set the following stylesheet:

#progressBar {
color: rgb(180,180,180);
background-color: rgb(100,200,100);
text-align: center;
font-size: 24px;
}
#progressBar::chunk {
background-color: rgb(10,150,0);
}

I'm using:

How can I fix it?


Solution

  • background-color does not seem to work with QProgressBar on Windows using Windows style, it appears to only affect its text background if not aligned:

    #include <QApplication>
    #include <QtWidgets>
    
    int main(int argc, char *argv[])
    {
        QApplication a(argc, argv);
    
        QProgressBar p;
    
        p.setObjectName("progressBar");
        p.setStyleSheet("#progressBar"
                        "{"
                            "background: rgb(100,200,100);"
                        "}");
    
        p.setRange(0,100);
        p.setValue(40);
        p.show();
    
        return a.exec();
    }
    

    QProgressBar text on the right with correct background color


    One possible workaround is to set the QProgressBar style to Fusion:

    #include <QApplication>
    #include <QtWidgets>
    
    int main(int argc, char *argv[])
    {
        QApplication a(argc, argv);
    
        QProgressBar p;
    
        p.setStyle(QStyleFactory::create("Fusion"));
    
        p.setObjectName("progressBar");
        p.setStyleSheet("#progressBar"
                        "{"
                            "color: rgb(180,180,180);"
                            "background-color: rgb(100,200,100);"
                            "text-align: center;"
                            "font-size: 24px;"
                        "}"
                        "#progressBar::chunk "
                        "{"
                            "background-color: rgb(10,150,0);"
                        "}");
        p.setRange(0,100);
        p.setValue(90);
    
        p.show();
    
        return a.exec();
    }
    

    Fusion style QProgressBar