Customizing ComboBox

tech2nick

Hi guys, I want to customize my ComboBox. I want to highlight (let's say blue) the item when pressed and leave the previously clicked item highlighted (let's say, lighter blue). I mean, I want the ComboBox to work as usually, but with different highlighting colours. I tried to use
Customizing ComboBox, but it changes colours of delegates permanently and the highlighting effect dissapears. Here's my code:

ComboBox {
    id: control
    property color color: "green"
    property int universalFontSize: height/3
    model: usersModel

    delegate: ItemDelegate {
        width: control.width
        text: modelData
        font.weight: control.currentIndex === index ? Font.DemiBold : Font.Normal
        highlighted: control.highlightedIndex == index
        }


    indicator: Canvas {
        x: control.width - width - control.rightPadding
        y: control.topPadding + (control.availableHeight - height) / 2
        width: 12
        height: 8
        contextType: "2d"

        Connections {
            target: control
            onPressedChanged: indicator.requestPaint()
        }

        onPaint: {
            context.reset();
            context.moveTo(0, 0);
            context.lineTo(width, 0);
            context.lineTo(width / 2, height);
            context.closePath();
            context.fillStyle = root.color
            context.fill();
        }
    }

    contentItem: Text {
        leftPadding: 0
        rightPadding: control.indicator.width + control.spacing
        font.pixelSize: universalFontSize
        text: control.displayText
        color: root.color
        horizontalAlignment: Text.AlignHCenter
        verticalAlignment: Text.AlignVCenter
        elide: Text.ElideRight
    }

    background: Rectangle {
        implicitWidth: 120
        implicitHeight: 40
        border.color: root.color
        border.width: 1
    }
}

Thank you in advance:)

jpnurmi

Is this what you're after?

delegate: ItemDelegate {
    id: delegate
    width: control.width
    text: modelData
    font.weight: control.currentIndex === index ? Font.DemiBold : Font.Normal
    highlighted: control.highlightedIndex == index
    background: Rectangle {
        color: delegate.down ? "steelblue" : delegate.highlighted ? "lightsteelblue" : "white"
    }
}