<![CDATA[Styling a checkbox]]>Hi
I want to style a checkbox so it just displays a border, so I followed the example in the documentation

//           CheckBox {
                id: checkBox
                anchors.verticalCenter: parent.verticalCenter
                visible: model.checkbox
                style: CheckBoxStyle {
                    indicator: Rectangle {
                        implicitHeight: 16
                        implicitWidth: 16
                        border.color: "red"
                        color: "transparent"
                        Rectangle {
                            visible: control.checked
                            color: "#555"
                            border.color: "#333"
                            radius: 1
                            anchors.margins: 4
                            anchors.fill: parent
                        }
                    }

                }
            }

This does give me a checkbox with a border, however the indicator is now a rectangle within the checkbox, because of the second rectangle definition. Without this definition I cannot 'check' the box, but my requirement is to show a 'tick' when checked (default without styling)
So I do I style my check box but retain the tick for checked boxes?
Thanks

]]>https://forum.qt.io/topic/101605/styling-a-checkboxRSS for NodeSun, 03 May 2026 00:32:34 GMTTue, 09 Apr 2019 15:16:49 GMT60<![CDATA[Reply to Styling a checkbox on Wed, 10 Apr 2019 07:53:05 GMT]]>@Gojir4
I also need to provide an image for the indicator

            CheckBox {
                id: checkBox
                checked: true
                anchors.verticalCenter: parent.verticalCenter
                visible: model.checkbox
                style: CheckBoxStyle {
                    indicator: Rectangle {
                        implicitHeight: 16
                        implicitWidth: 16
                        border.color: "#22add8"
                        color: "transparent"
                        Image {
                            x: (parent.width - width) / 2
                            y: (parent.height - height) / 2
                            source: "images/tick.png"
                            visible: checkBox.checked
                        }
                    }

                }
]]>https://forum.qt.io/post/522253https://forum.qt.io/post/522253Wed, 10 Apr 2019 07:53:05 GMT<![CDATA[Reply to Styling a checkbox on Tue, 09 Apr 2019 16:10:35 GMT]]>@GrahamLa Hi,

According to Customizing CheckBox.

I guess you only need to define background in your style and put then your rectangle with border inside.

style: CheckBoxStyle {
    background: Rectangle {
        implicitHeight: 16
        implicitWidth: 16
        border.color: "red"
        color: "transparent"
    }
}
]]>https://forum.qt.io/post/522139https://forum.qt.io/post/522139Tue, 09 Apr 2019 16:10:35 GMT