QML ComboBox style

I customized a Combobox with the following code but there are some things I don't understand and so can't fix. First, the height of the hovered element with id rectDlgt. I ouput in the console the heights of itemDlgt and rectDlgt and they are not the same while I expect they should. itemDlgt is 40 in height and rectDlgt is 16.

The second thing is that grey rectangle that appears when I press on an element in the list. I assume it's linked to listView but it doesn't seem to change even with a delegate in the ListView.

ComboBox {
  id:equipmentList
  anchors.verticalCenter: parent.verticalCenter
  width: 318
  height:64

  model: [ qsTr("Equipment1"), qsTr("Equipment2"), qsTr("Equipment3"), qsTr("Equipment4"), qsTr("Equipment5"), qsTr("Equipment6") ]

  //the background of the combobox
  background: Rectangle {
      color: "#95A4A8"
      border.color: "white"
      radius: height/2
  }

  delegate: ItemDelegate {
      id:itemDlgt
      width: equipmentList.width
      height:40

      contentItem: Rectangle{
          id:rectDlgt
          width:parent.implicitWidth
          height:itemDlgt.height
          color:itemDlgt.hovered?"#507BF6":"white";

          Text {
              id:textItem
              text: modelData
              color: hovered?"white":"#507BF6"
              font: equipmentList.font
              elide: Text.ElideRight
              verticalAlignment: Text.AlignVCenter
              horizontalAlignment: Text.AlignLeft
          }
       }

        onPressed: console.log(itemDlgt.height+" "+rectDlgt.height)//are not the same!
   }

   //the arrow on the right in the combobox
   indicator:Image{
         width:50; height:width;
         horizontalAlignment:Image.AlignRight
         source:comboPopup.visible ? "arrowOpen.png":"arrowClose.png";
   }

   //the text in the combobox
   contentItem: Text {
         leftPadding: 20
         rightPadding: equipmentList.indicator.width + equipmentList.spacing

         text: equipmentList.displayText
         font: equipmentList.font
         color: "white"
         verticalAlignment: Text.AlignVCenter
         horizontalAlignment: Text.AlignLeft
         elide: Text.ElideRight
   }

   //the list of elements and their style when the combobox is open
   popup: Popup {
         id:comboPopup
         y: equipmentList.height - 1
         width: equipmentList.width
         height:contentItem.implicitHeigh
         padding: 1

         contentItem: ListView {
             id:listView
             implicitHeight: contentHeight
             model: equipmentList.popup.visible ? equipmentList.delegateModel : null

             ScrollIndicator.vertical: ScrollIndicator { }
         }

         background: Rectangle {
            radius: 20
            border.width: 1
            border.color:"#95A4A8"
         }
     }

  }

So how to correct the height of rectDlgt and what is the grey rectangle above the pressed element?

Thanks.

EDIT: with Jiu's answer, I get:

And the new code, only for the delegate in ComboBox:

...
delegate: ItemDelegate {
          id:itemDlgt
          width: equipmentList.width
          height:40
          padding:0

          contentItem: Text {
              id:textItem
              text: modelData
              color: hovered?"white":"#507BF6"
              font: equipmentList.font
              elide: Text.ElideRight
              verticalAlignment: Text.AlignVCenter
              horizontalAlignment: Text.AlignLeft
              leftPadding: 20
          }

          background: Rectangle {
            radius: 20
            color:itemDlgt.hovered?"#507BF6":"white";
            anchors.left: itemDlgt.left
            anchors.leftMargin: 0
            width:itemDlgt.width-2
          }

          ...

        }
...

Thanks!

what is the grey rectangle

It is the background of ItemDelegate, the width of it is the padding of itemDlgt. The contentItem is within itemDlgt padding. see this.

how to correct the height of rectDlgt

Height of itemDlgt - Height of rectDlgt = Both top&bottom padding of itemDlgt

40 - 16 = 12 * 2

If you want both heights are the same value, you can set padding to zero. But I guess you may need to modify the default background.