Qt checkbox/toolbutton with custom/distinct check/unchecked icons

Question

I need to have a checkbox like control where the checked and unchecked states use a custom graphic. I've looked at all the docs for QToolButton and QCheckBox, along with QIcon but couldn't find any combination that does what I want.

I just want to use one icon (pixmap actually) in the unchecked state, and a different one in the checked state.

This feels like it should be easy, but the solution (short of a custom control) is eluding me.

---

I've tried using a style sheet as well, and QToolButton:checked with a background-image kind of works but I can't get the layout correct -- it's not positioned/sized as with an icon.

Answer 1

You may also include and use your icons as resources:

QCheckBox::indicator:checked {image: url(:/circle-green.png);}
QCheckBox::indicator:unchecked {image: url(:/circle-red.png);}

Answer 2

Use ::indicator sub-item. the code below works excellent for me...

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

  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);
  }
  QCheckBox::indicator:unchecked:disabled
  {
    image: url(.../Checkbox_unchecked_disabled.png);
  }

Answer 3

This must be entered as a StyleSheet. Do this via the Design editor by right click on the check box and selecting "Change stylesheet...".