Increase check box size not its text using QCheckbox?

Question

How do I increase the size of the check box for the QCheckBox control and not the text size?

Thanks.

score 23 · Accepted Answer · answered Jun 10 '11 at 06:37

Jérôme has given you good advice. I will just give further examples.

QCheckBox::indicator {
     width: 40px;
     height: 40px;
 }

  QCheckBox::indicator:checked
  {
    image: url(../Checkbox_checked_normal.png);
  }
  QCheckBox::indicator:unchecked
  {
    image: url(../Checkbox_unchecked_normal.png);
  }

  QCheckBox::indicator:checked:hover
  {
    image: url(../Checkbox_checked_hovered.png);
  }
  QCheckBox::indicator:unchecked:hover
  {
    image: url(../Checkbox_unchecked_hovered.png);
  }
  QCheckBox::indicator:checked:pressed
  {
    image: url(../Checkbox_checked_pressed.png);
  }
  QCheckBox::indicator:unchecked:pressed
  {
    image: url(../Checkbox_unchecked_pressed.png);
  }
  QCheckBox::indicator:checked:disabled
  {
    image: url(../Checkbox_checked_disabled.png);
  }

Pay attention to difference between url() usages. In my example I am loading images from disk rather than embedded resource system which I find more appropriate. If you start url with (:/...) it loads from embedded resource system.

Then load your style sheet as below

QFile file("your path");
bool bOpened = file.open(QFile::ReadOnly);
assert (bOpened == true);

QString styleSheet = QLatin1String(file.readAll());

qApp->setStyleSheet (styleSheet);

I hope this helps.

Note that, according to [Qt documentation](https://doc.qt.io/qt-5/stylesheet-reference.html#image-prop), the "image is never scaled up but always scaled down if necessary" (except for svg). — Remi Cuingnet, Mar 13 '19 at 07:38

score 20 · Answer 2 · edited Dec 23 '19 at 18:54

20

I would recommend using Qt style sheet.

You can change the size of the indicator :

QCheckBox::indicator {
     width: 40px;
     height: 40px;
}

You'll have to change the image of the indicator, and provide an image with a corresponding size :

QCheckBox::indicator:checked {
     image: url(:/images/checkbox_checked.png);
}

You can also make the change using the Qt Designer and the Style Sheet editor. Right click on the QCheckbox, and select Change styleSheet.

edited Dec 23 '19 at 18:54

jww

97,681
90
411
885

answered Jun 10 '11 at 06:15

Jérôme

26,567
29
98
120

I added an image of the change in Qt Designer. I think your answer was a better place than a "mee too" answer. Please revert it if you disagree. – jww Dec 23 '19 at 18:55
the indicator size would not gonna change the size of default checkbox – greendino Sep 11 '20 at 02:48

score 1 · Answer 3 · answered Feb 26 '18 at 13:48

I used this:

eyeChk = new QCheckBox("Eyes:");

_eyeChk->setStyleSheet("QCheckBox::indicator { width:150px; height: 150px;} QCheckBox::indicator::checked {image: url(/home/jvdglind/Downloads/280px-PNG_transparency_demonstration_2.png);}");

And just found sound decent default checkbox images.

Increase check box size not its text using QCheckbox?

3 Answers3

Linked

Related