Qt Widgets setStyleSheet

Question

Since I am programming for a tablet enviroment, some widgets are too small for touchable interaction. I want to make QSpinBox buttons bigger specifically.

After some search, I found the only way appears setStyleSheet function, but then it is not very well explained how to use it. In this link to Qt reference it is described what should I pass to setStyleSheet function, but it is not clear if I can use part of it, or I should use all of it even if I only want to change one thing.

Anyway, using part of it or the whole text, my QDoubleSpinBox looks as default after appling this settings. It was even bigger as I draw in mi ui file than it is now. Of course it is not painting its background yellow (just for checking if it's working) or making buttons any bigger.

I'm using this function:

customizeSpinBox(ui.doubleSpinBoxDistanciaLocalizador);
                ui.doubleSpinBoxDistanciaLocalizador->setVisible(true);

void MyClass::customizeSpinBox(QDoubleSpinBox *spinBox){

qApp->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: 80px; height: 77px; background-color: yellow; }"
                       "QSpinBox::up-button:hover { width: 80px; height: 77px; background-color: yellow; }"

                       "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: 80px; height: 77px; background-color: yellow; }"
                       "QSpinBox::down-button:hover { width: 80px; height: 77px; background-color: yellow; }"
    );

}

Any help?

Answer 1

First of all - this stylesheet code cannot work. Closing "}" are missing in some lines.

In order to set minimum size of the QSpinBox try this: QSpinBox { border: 3px solid red; border-radius: 5px; background-color: yellow; min-width: 200px; min-height: 200px; }

Using this method I got big, ugly spinboxes with this styling:

"QSpinBox { border: 3px solid red; border-radius: 5px; background-color: yellow; min-height: 150px; min-width: 150px; }"
"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 { min-width: 80px; min-height: 77px; background-color: yellow; }"
"QSpinBox::up-button:hover { min-width: 80px; min-height: 77px; background-color: yellow; }"
"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 { min-width: 80px; min-height: 77px; background-color: yellow; }"
"QSpinBox::down-button:hover { min-width: 80px; min-height: 77px; background-color: yellow; }"