Customizing ComboBox

[kgregory]

I'm using the Customizing ComboBox example found here and modifying it to fit my style: https://doc.qt.io/qt-5/qtquickcontrols2-customize.html#customizing-combobox

I've changed the color of the background and popup background as well as the radius of each. However, I can't figure out what property I need to modify for the background of the selected item. It seems to use the default radius and a very light shade of gray for the background, which fails to provide good contrast with my pure white letters. Can anyone shed some light?

[Eeli K]

@kgregory You can replace the delegate with a fully customized one. For example, open qml/QtQuick/Controls.2/ComboBox.qml from your Qt binaries folder. You can see that in the Default style the delegate is ItemDelegate. It might be different type in other styles. Open ItemDelegate.qml. Now you can see how it is customized in the Default style, how it is customized in Default style ComboBox and how you can customize it further.

[Eddy]

@kgregory
you might use :

ComboBox {
background: Rectangle {
           color : "yellow"
       }
}

This overrides the background with a rectangle, where we set the color.
It is explained in the link you provided us. There are several solutions there. Dependent on your use case you can pick one.

Eddy

[Eeli K]

Oh yes, from what Eddy said I noticed you could mean the non-opened combobox background, not the selected item in the opened popup. But my advice of looking into the default implementations works for that, too.

[kgregory]

This much I think I understand. I found the default code as Eeli recommended, but I still don't see how to change what I want.

It seems to be the "highlighted" property. I don't see where to specify what that property does visually.

I've redefined the popup background as follows. That seems to work correctely except for the highlighted item's background has radius 0 and is a light-gray color. I don't see how to modify that.

background: Rectangle {
                    border.color: "#FFFFFF"
                    color: "#A0000000"
                    radius: 30
                }

[racerXali]

Hope this works:

QComboBox QAbstractItemView
 {
    border: 2px solid Blue;
    selection-background-color:red;
    background-color: white;
}

[Eeli K]

@kgregory Can you paste here your whole customized ComboBox file and also external customized component files (like MyItemDelegate.qml) if it uses them?

[Eeli K]

@kgregory If I interpret you correctly you would want to change the ComboBox delegate's background. It's in the ItemDelegate:

background: Rectangle {
       implicitWidth: 100
       implicitHeight: 40
       visible: control.down || control.highlighted || control.visualFocus
       color: control.visualFocus
           ? (control.pressed ? Default.focusPressedColor : Default.delegateFocusColor)
           : (control.down ? Default.delegatePressedColor : Default.delegateColor)
}

It's visible only in selected or clicked item and the color is changed depending on the conditions you can see in the "color" property. When it's not visible, only the popup background is visible behind the text. Just change the color and set "radius: 30" or whatever you like. The component structure is:

ComboBox {
    delegate: ItemDelegate {
        background: Rectangle {
            //customizations here
        }
    }
}

[kgregory]

@Eeli-K I tried that, but it seems to have overrided my background for all of the options (both highlighted & non-highlighted). Here is my entire combo box code:

ComboBox{
        id: styleSelector
        width: 0.8*parent.width
        height: 0.05*parent.height
        anchors.top: nameBlock.bottom
        anchors.topMargin: .05*parent.width
        anchors.horizontalCenter: parent.horizontalCenter
        font.pixelSize: .025*parent.height
        currentIndex: (snack.showSelection.showStyle-1)
        onCurrentIndexChanged: {
            snack.showSelection.showStyle=(currentIndex+1);
        }
        model: ["Popcorn","Candy"]
        delegate: ItemDelegate {
                width: styleSelector.width
                contentItem: Text {
                    text: modelData
                    color: "#FFFFFF"
                    font: parent.font
                    elide: Text.ElideRight
                    verticalAlignment: Text.AlignVCenter
                }
                background: Rectangle {
                    implicitWidth: parent.width
                    implicitHeight: parent.height
                    color: "#A0A0A0A0"
                    border.color: "#FFFFFF"
                    border.width: 2
                    radius: 30
                }
                highlighted: styleSelector.highlightedIndex === index
            }
        background: Rectangle {
                implicitWidth: parent.width
                implicitHeight: parent.height
                color: "#A0000000"
                border.color: styleSelector.pressed ? "#C0C0C0" : "#FFFFFF"
                border.width: styleSelector.visualFocus ? 2 : 1
                radius: 30
            }
        contentItem: Text {
                leftPadding: 0
                rightPadding: parent.indicator.width + parent.spacing

                text: parent.displayText
                font: parent.font
                color: parent.pressed ? "#C0C0C0" : "#FFFFFF"
                horizontalAlignment: Text.AlignLeft
                verticalAlignment: Text.AlignVCenter
                elide: Text.ElideRight
            }
        popup: Popup {
                y: parent.height - 1
                width: parent.width
                implicitHeight: contentItem.implicitHeight
                padding: 1

                contentItem: ListView {
                    clip: true
                    implicitHeight: contentHeight
                    model: styleSelector.popup.visible ? styleSelector.delegateModel : null
                    currentIndex: styleSelector.highlightedIndex
                    ScrollIndicator.vertical: ScrollIndicator { }
                }

                background: Rectangle {
                    border.color: "#FFFFFF"
                    color: "#A0000000"
                    radius: 30
                }
            }
    }

[Eeli K]

@kgregory Pay attention to the visibility property and what I said about it. You can copy it from the Default theme. The problem will be solved.