Important: Please read the Qt Code of Conduct -

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