how to change checkbox style in Qt

Question

I have a checkbox in Qt that I want to change its style from the one in the picture below:

to the one in the picture below:

What I've tried so far is:

QCheckBox::indicator::checked
{
background-color: rgb(24, 144, 255);
indicator: white;
}

result:

the check inside checkbox disappears

Maybe this helps: https://stackoverflow.com/questions/17800541/how-to-change-the-color-of-tick-in-qcheckbox-widget — HARSH MITTAL, Jun 01 '21 at 10:22
setting `color: white;` makes somewhat similar to your requirement. — smalik, Jun 01 '21 at 11:25
@HARSHMITTAL so if I'm not wrong what I understood is that it's can't be done without using images — temp, Jun 01 '21 at 12:53

score 0 · Accepted Answer · answered Jun 01 '21 at 15:06

0

You are on the right track. You can either use an image or a font like Font Awesome to be loaded. For example, the QML example below uses the checkmark unicode as the text property. You can use a FontLoader to load the font or see if you have a system font that has a checkmark.

FontLoader {
   id: fontAwesome
   source: "qrc:<path>/fontawesome.otf"
}

CheckDelegate {
    contentItem: Label {
        ...
    }

    background: Rectangle {
        ...
        color: "white"
    }

    indicator: Rectangle {
        ...
        Text {
            text: checked ? "\uf00c" : ""
            font.family: fontAwesome.name // Setup from FontLoader
        }
    }
}

answered Jun 01 '21 at 15:06

slayer

643
7
14

I was trying to avoid the usage of an image but if it's like so I'm afraid that I have no other choice – temp Jun 02 '21 at 07:24
1

The font unicode style is probably the most convenient as it supports SVG and keeps your package size small. Or else the image will have to be embedded within the executable as a resource. Plus you might use the font in other places as well for nice button design. – slayer Jun 02 '21 at 14:46

how to change checkbox style in Qt

1 Answers1