QSpinBox setting buttons with using stylesheets

Hello,

I have another question about stylesheet on complex widgets.
Documentation contains following sentence:

Quote:

---

Note: With complex widgets such as QComboBox and QScrollBar, if one property or sub-control is customized, all the other properties or sub-controls must be customized as well.

---

and I can't use custom border because buttons are disappearing.

I would like to use standard images of arrows on buttons but without using 'image' property. Is it possible?
Is it possible to draw QStyle::PE_IndicatorSpinUp with using stylesheet and how?


Franko.

Maybe I didn't specify my problem. I would like to change size of the spinbox buttons. I do this with

Code:

---

"QSpinBox::up-button { width: 32px; }"
"QSpinBox::down-button { width: 32px; }"

---

and it works.
Now I have a problem with background color.
I want to change only background of spinbox area (for example yellow). When I try to do it with

Code:

---

"QSpinBox { background-color: yellow; }"

---

all elements have yellow color.
How can I prevent to change colors of buttons?

Any help is appreciated :)

Thank you.

OK. I found only this solution and I think I will use it:

Code:

---

#include "mainwindow.h"
#include "ui_mainwindow.h"
 
MainWindow::MainWindow(QWidget *parent) :
        QMainWindow(parent),
        ui(new Ui::MainWindow)
{
    ui->setupUi(this);
 
    QCommonStyle style;
    ui->pushButtonBack->setIcon(style.standardIcon(QStyle::SP_ArrowBack));
    ui->pushButtonSend->setIcon(style.standardIcon(QStyle::SP_DialogOkButton));
 
    QPalette palbut = ui->pushButtonBack->palette();
    QPalette palspin = ui->spinBox->palette();
    QPalette palyellow(QColor("yellow"));
 
//    qDebug("height spinbox: %d", ui->spinBox->height());
 
    ui->label->setStyleSheet("QLabel { border-color: yellow; border-style: inset; border-width: 5px; }");
 
    ui->spinBox->setStyleSheet("QSpinBox { border: 3px solid red; border-radius: 5px; background-color: yellow; }"
                               "QSpinBox::up-arrow { border-left: 17px solid none;"
                               "border-right: 17px solid none; border-bottom: 17px solid black; width: 0px; height: 0px; }"
                               "QSpinBox::up-arrow:hover { border-left: 17px solid none;"
                               "border-right: 17px solid none; border-bottom: 17px solid black; width: 0px; height: 0px; }"
                               "QSpinBox::up-button { width: 40px; height: 37px; background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0.25 "+getRGBhexColor(palspin.light().color())+", stop: 1 "+getRGBhexColor(palspin.midlight().color())+") }"
                               "QSpinBox::up-button:hover { width: 40px; height: 37px; background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0.25 "+getRGBhexColor(palspin.light().color())+", stop: 1 "+getRGBhexColor(palspin.shadow().color())+") }"
 
                               "QSpinBox::down-arrow { border-left: 17px solid none;"
                               "border-right: 17px solid none; border-top: 17px solid black; width: 0px; height: 0px; }"
                               "QSpinBox::down-arrow:hover { border-left: 17px solid none;"
                               "border-right: 17px solid none; border-top: 17px solid black; width: 0px; height: 0px; }"
                               "QSpinBox::down-button { width: 40px; height: 37px; background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0.25 "+getRGBhexColor(palspin.light().color())+", stop: 1 "+getRGBhexColor(palspin.midlight().color())+") }"
                               "QSpinBox::down-button:hover { width: 40px; height: 37px; background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0.25 "+getRGBhexColor(palspin.light().color())+", stop: 1 "+getRGBhexColor(palspin.shadow().color())+") }"
            );
 
 
    QStringList list;
    list.append("QPushButton { font: 75 28pt \"Serif\"; border-width: 3px; border-radius: 5px; border-style: solid; border-color: "+getRGBhexColor(palbut.mid().color())+"; "
                "background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0.5 "+getRGBhexColor(palbut.light().color())+", stop: 1 "+getRGBhexColor(palbut.dark().color())+") }"
                "QPushButton:pressed { background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 "+getRGBhexColor(palbut.dark().color())+", stop: 1 "+getRGBhexColor(palbut.light().color())+"); }");
    list.append("QPushButton { font: 75 28pt \"Serif\"; border: 1px solid "+getRGBhexColor(palyellow.shadow().color())+"; border-radius: 5px;"
                "background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0.5 "+getRGBhexColor(palyellow.button().color())+", stop: 1 "+getRGBhexColor(palyellow.shadow().color())+"); min-width: 10px; }"
                "QPushButton:pressed { background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 "+getRGBhexColor(palyellow.dark().color())+", stop: 1 "+getRGBhexColor(palyellow.light().color())+"); }"
//                "QPushButton:flat { border: none; }"
//                "QPushButton:default { border-color: navy; }"
                );
 
    colorsStyleSheets.append(list);
    colorsStyleSheets.append(list);
 
    connect(&colorTimer, SIGNAL(timeout()), this, SLOT(sColorTimerTimeout()));
    startColorTimer();
}
 
MainWindow::~MainWindow()
{
    delete ui;
}
 
void MainWindow::changeEvent(QEvent *e)
{
    QMainWindow::changeEvent(e);
    switch (e->type()) {
    case QEvent::LanguageChange:
        ui->retranslateUi(this);
        break;
    default:
        break;
    }
}
 
void MainWindow::startColorTimer() {
    QWidget* twid = this->focusWidget();
    if(twid == ui->pushButtonBack)
        twid->setStyleSheet(colorsStyleSheets.at(0).at(1));
    else if(twid == ui->pushButtonSend)
        twid->setStyleSheet(colorsStyleSheets.at(1).at(1));
 
    colorTimer.start(1000);
}
 
void MainWindow::stopColorTimer() {
    colorTimer.stop();
}
 
void MainWindow::sColorTimerTimeout() {
    QWidget* twid = this->focusWidget();
    QStringList tlist;
    int idx = -1;
    if(twid == ui->pushButtonBack)
        tlist = colorsStyleSheets.at(0);
    else if(twid == ui->pushButtonSend)
        tlist = colorsStyleSheets.at(1);
    if(twid == ui->pushButtonBack || twid == ui->pushButtonSend) {
        QPushButton* tpb = qobject_cast<QPushButton*>(twid);
        tpb->setFlat(false);
        idx = tlist.indexOf(twid->styleSheet());
        idx++;
        if(idx >= tlist.size())
            idx = 0;
        twid->setStyleSheet(tlist.at(idx));
    }
}
 
QString MainWindow::getRGBhexColor(const QColor color) {
    QString col("#");
//    qDebug("red:   %x", color.red());
    if(color.red() == 0)
        col.append("00");
    else
        col.append(QString::number(color.red(), 16));
//    qDebug("green: %x", color.green());
    if(color.green() == 0)
        col.append("00");
    else
        col.append(QString::number(color.green(), 16));
//    qDebug("blue:  %x", color.blue());
    if(color.blue() == 0)
        col.append("00");
    else
        col.append(QString::number(color.blue(), 16));
    return col;
}

---

Code:

---

#ifndef MAINWINDOW_H
#define MAINWINDOW_H
 
#include <QMainWindow>
#include <QStringList>
#include <QTimer>
 
#include <QCommonStyle>
 
namespace Ui {
    class MainWindow;
}
 
class MainWindow : public QMainWindow {
    Q_OBJECT
public:
    MainWindow(QWidget *parent = 0);
    ~MainWindow();
 
protected:
    void changeEvent(QEvent *e);
 
private slots:
    void sColorTimerTimeout();
 
private:
    void startColorTimer();
    void stopColorTimer();
 
    QString getRGBhexColor(const QColor color);
 
    Ui::MainWindow *ui;
 
    QTimer colorTimer;
    QList<QStringList> colorsStyleSheets;
};
 
#endif // MAINWINDOW_H

---

But still this is not what i want to achive...

When I use only this piece of code:

Code:

---

ui->spinBox->setStyleSheet("background-color: yellow;")

---

I've got spinbox which looks like on image_1_background (white frame in text area with yellow background) which I would like to achive.
But when I use code from above class I've got spinbox which looks like on image_2_whithout_frame (background color fills all content). I don't want have a color which fills background under buttons.

If anyone have an idea how can I achieve my intended effect (from first image) with changing size of buttons I will be grateful.

Thank you.
Regards for programmers.
Franko