Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

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



  • @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"
        }
    }
    


  • @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
                            }
                        }
    
                    }
    

Log in to reply