QComboBox style for the selected item in the drop-down list

Question

I want to create a selection of the selected item in the combobox dropdown.

The difference with other questions is that I do not want to stylize the "selected" element (hovering with the mouse). BUT . I'm interested in the style of an already selected item.

By default, some ticker is used, painted above the text. I want the selected item to have bold text and an image without a ticker.

Or in the worst case, just to shiftth the text to the right to make the ticker visible.

What I have:

Pay attention to the 17th element with a ticker above number 17.

This is my stylesheet:

QComboBox { subcontrol-origin: padding; subcontrol-position: top right; selection-background-color: #111; selection-color: yellow; color: white; background-color: QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #565656, stop: 0.1 #525252, stop: 0.5 #4e4e4e, stop: 0.9 #4a4a4a, stop: 1 #464646); border-style: solid; border: 1px solid #1e1e1e; border-radius: 5; padding: 1px 0px 1px 20px; } QComboBox:hover, QPushButton:hover { border: 1px solid yellow; color: white; } QComboBox:editable { background: red; color: pink; } QComboBox:on { padding-top: 0px; padding-left: 0px; color: white; background-color: QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #2d2d2d, stop: 0.1 #2b2b2b, stop: 0.5 #292929, stop: 0.9 #282828, stop: 1 #252525); selection-background-color: #ffaa00; } QComboBox:!on { color: white; background-color: QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #666, stop: 0.1 #555, stop: 0.5 #555, stop: 0.9 #444, stop: 1 #333); } QComboBox QAbstractItemView { border: 2px solid darkgray; color: black; selection-background-color: QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #111, stop: 1 #333); } QComboBox::drop-down { subcontrol-origin: padding; subcontrol-position: top right; width: 15px; color: white; border-left-width: 0px; border-left-color: darkgray; border-left-style: solid; /* just a single line */ border-top-right-radius: 3px; /* same radius as the QComboBox */ border-bottom-right-radius: 3px; padding-left: 10px; } QComboBox::down-arrow, QSpinBox::down-arrow, QTimeEdit::down-arrow, QDateEdit::down-arrow { image: url(:/icons/down_arrow.png); width: 7px; height: 5px; } 

I tried to override the delagate element:

 ui->modeComboBox->setItemDelegate(new QStyledItemDelegate()); 

together with

 QComboBox QAbstractItemView::item:selected style 

Or override the view:

 QListView * listView = new QListView(ui->modeComboBox); listView->setStyleSheet("QListView::item { \ border-bottom: 5px solid white; margin:3px; } \ QListView::item:selected { \ border-bottom: 5px solid black; margin:3px; \ color: black; \ }"); ui->modeComboBox->setView(listView); 

but in both cases, this completely disables the selection of the selected item (this is the 17th item).

UPDATE 1

I tested the installation :: item: checked the stylesheet, but this did not help:

 QListView * listView = new QListView(ui->modeComboBox); listView->setStyleSheet("QListView::item { \ border-bottom: 5px solid white; margin:3px; } \ QListView::item:selected { \ border-bottom: 5px solid black; margin:3px; \ color: black; } \ QListView::item:checked { \ background-color: green; \ color: green;}" ); ui->modeComboBox->setView(listView); 

I also added this to the stylesheet to make sure:

 QComboBox QListView::item:checked { background-color: green; } 

The result with checked mode 17 was (black - only mouse hover):

UPDATE 2

Ok I was able to change the font weight of the marked item, but I cannot remove the stupid ticker from the item. I experimented with a stylesheet, and I found out that these two selectors are responsible for the style of checked highlightation elements:

 QWidget:item:selected { border: 0px solid #999900; background: transparent; } QWidget:item:checked { font-weight: bold; } 

If I delete the :: item: selected element, then: item: checked does not work (it does not support the marked element), and the ticker disappears.

At the Qt forum, they advised me to somehow shorten the "space for combobox icons" .. I can not find the selector that is responsible for this.

I have a feeling that the style sheet is black magic, and only the chosen one can understand what is happening inside.

Answer 1

Well after a lot of battle I made some workaround. This is not the best, it is not right, but it looks fine ..

I added a bold effect this way (it affects other widgets, such as checked menu items, but I can live with it):

 QWidget:item:selected { border: 0px solid #999900; background: transparent; } QWidget:item:checked { font-weight: bold; } 

Then, when I add elements, I add spaces to my text to shift them to the right. I tried so many things, but nothing affected the QAbstractItemView inside.

This is the result:

Answer 2

I had success with less specific style selectors and padding-left:

 QComboBox:item { padding-left: 20px; /* move text right to make room for tick mark */ } QComboBox:item:selected { padding-left: 20px; /* move text right to make room for tick mark */ border: 2px solid black; } QComboBox:item:checked { padding-left: 20px; /* move text right to make room for tick mark */ font-weight: bold; } 

(perhaps this is also unnecessary duplication!)

Answer 3

I know this is very late, but for people having the same problem: I found another question here: Failed to hide the Choice-Indicator QComboBox

This should hide the indicator / checkmark:

 QComboBox::indicator{ background-color:transparent; selection-background-color:transparent; color:transparent; selection-color:transparent; } 

Answer 4

It worked for me !:

 myComboBox->setStyleSheet("QListView{color:black; background-color:white;}");