How to change background qt quick controls 2 combobox ?

  • Hello all.
    I need help to change background color delegate of combobox.
    I tried change "Material.background" , but not change delegate background color(

        Material.background: "white"
        textRole: "key"
        model: ListModel
            ListElement { key: "First"; value: 123 }
            ListElement { key: "Second"; value: 456 }
            ListElement { key: "Third"; value: 789 }

    alt text
    alt text

  • @TheGringerEye
    You should customize the combo box control.
    refer this Customizing Combobox

  • @Mammamia I tried this, but were lost Material Design Effects such as Waves, ElevatorEffect and other.

  • @TheGringerEye said in How to change background qt quick controls 2 combobox ?:

    @Mammamia I tried this, but were lost Material Design Effects such as Waves, ElevatorEffect and other.

    I believe it shouldn't happen if you if replace only the delegate and not background etc.

    ComboBox {
    id: control
    delegate: MenuItem {
            width: control.popup.width
            text: control.textRole ? (Array.isArray(control.model) ? modelData[control.textRole] : model[control.textRole]) : modelData
            Material.foreground: control.currentIndex === index ? control.popup.Material.accent : control.popup.Material.foreground
            highlighted: control.highlightedIndex === index
            hoverEnabled: control.hoverEnabled

    Here the delegate is copied from my Qt installation Qt/5.8/[compilerversion]/qml/QtQuick/Controls.2/Material/ComboBox.qml. Try adding Material.background to the delegate.

  • @Eeli-K Not working :(

  • Qt Champions 2016

    @TheGringerEye here's my custom combo box
    perhaps gives you some ideas.

    // this custom ComboBox works using a JS datamodel where the model is something like this:
    // [{"imageName":"download.png", "itemText":qsTr("Download")}, ...]
    // using same model as a QML ListModel you must change the delegate: model.imageName
    // and contentItem: listModel.get(comboBox.currentIndex).imageName
    ComboBox {
        id: comboBox
        focusPolicy: Qt.NoFocus
        property bool containsInvalidItems: false
        delegate: ItemDelegate {
                    width: comboBox.width
                    Material.foreground: comboBox.currentIndex === index ? comboBox.Material.accent : comboBox.Material.foreground
                    highlighted: comboBox.highlightedIndex === index
                    contentItem: Row {
                        spacing: 6
                        IconInactive {
                            imageName: modelData.imageName
                        LabelSubheading {
                            text: modelData.itemText
                            anchors.verticalCenter: parent.verticalCenter
                            font.strikeout: comboBox.containsInvalidItems && modelData.invalidItem
            Row {
            // need some space to see the indicator
            // need some extra space for the rows to display Icon and text if displayText is used
            rightPadding: comboBox.displayText.length? 24+16 : 16
            spacing: 6
            IconInactive {
                visible: !comboBox.displayText.length
                imageName: comboBox.model[comboBox.currentIndex].imageName
            LabelSubheading {
                text: comboBox.displayText.length? comboBox.displayText : comboBox.model[comboBox.currentIndex].itemText
                anchors.verticalCenter: parent.verticalCenter
                font.strikeout: comboBox.displayText.length? false : comboBox.containsInvalidItems && comboBox.model[comboBox.currentIndex].invalidItem
        } // row

    and here's how I'm using this ComboBox:

    ComboBoxWithIcon {
        id: selectToursDropDown
        Layout.leftMargin: 6
        Layout.rightMargin: 6
        displayText: qsTr("Tour selection")
        model: [
            {"imageName":"schedule_my.png", "itemText":qsTr("Show my")},
            {"imageName":"schedule.png", "itemText":qsTr("Show all")},
            {"imageName":"directions.png", "itemText":qsTr("Transfer")},
            {"imageName":"download.png", "itemText":qsTr("Download")}
        onCurrentIndexChanged: {
            // do something

    LabelSubheading and IconInactive itself are also customized controls.
    Take a look at my sample apps at github

  • @TheGringerEye If the given examples don't work, you have to give more information. How the comboboxes are coded, created and used? Can you replicate the problem with a minimal app, created with the Qt Creator's wizard, where the combobox and the using code is in main.qml?

  • Hi! Have a look at ComboBox.qml to see how the default implementation works. Should be easy to modify it to fit your needs.

  • @Eeli-K Background dont changed

  • @TheGringerEye So you want to change both the contentItem's and delegate's background to white? Can you paste the minimal app here?

Log in to reply

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.