QComboBox style for choosen item in drop-down list

Question

I want to style the highlighting of chosen item in drop-down of combobox.

The difference to other questions is that I do not want to style "selected" item (hovered over), but to style the already chosen item.

The default is some sort of tick which is painted over text. I want the chosen item to have bold text and no tick.

Or in worst case to just shifth the text to the right, to make the tick visible properly.

What I have is this:

Notice the 17th item which has tick over the 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 was trying to override the item delagate:

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

along 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 totally disables the highlight of chosen item (which is 17th item)

UPDATE 1

I tested to set ::item:checked stylesheet but it didn't 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);

Also I added this to stylesheet just to be sure:

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

The result with 17 mode checked was (the black is just mouse hover):

UPDATE 2

Ok I was able to change the weight of font of checked item, but I can not remove the tick from the item. I experimented with my stylesheet file and I found out that these two selectors are responsible for style of checked items highlightation:

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

If I remove the ::item:selected then the ::item:checked do not work (it does not make the checked item bold) and the tick disappears.

On Qt forum they advised me to somehow shorten the "space for icons of combobox". I can not find the selector which is responsible for that.

Estefanaestel

Never tested but have you tried: QComboBox QListView::item:checked { background-color: green; }? – Adkinson

@iuliu I tried it didnt worked, updated the question.. thanks – Estefanaestel

@Adkinson your suggestion helped me, but I set it on QWidget.. but still I was not able to remove the ticker.. – Estefanaestel

Answer 1

Ok after lot of struggle I made some workaround.. its not best, its not proper, but it looks ok..

I added the bold effect in this way (it affect other widgets like checkable menu items, but I can live with that):

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

Then when I am adding items I am prepending spaces into their text in order to shift it to the right.. I was trying so many things, but nothing affected the QAbstractItemView inside.

This is the result:

Estefanaestel

Answer 2

I know it's really late, but for people having the same problem: I found this at another question here: Not able to hide Choice-Indicator of the QComboBox

This should hide the indicator/tick:

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

Clemmy

Answer 3

I had success with less specific stylesheet 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;
}

(probably some unnecessary duplication in that, too!)

Begley

I think I tried that .. maybe in newer Qt its working properly.. however what I wanted to achieve was to have only bold and no ticker at all - but if this works its better solution than to add spaces (I do not have time to check your solution), maybe if someone here can try it at least and give feedback.. – Estefanaestel

This fix the problem but it created a new one (Qt 5.9.2). The height of each item take the half of the height of the screen. I have to add a max-height... – Cheatham

Answer 4

@Miklemyers answer removes the indicator/tick, but I found that the space is still left. To remove the space, I found I had to also use

QComboBox::item:selected {                                                                                                      
    border: none;
} 

Balkh

Answer 5

This worked for me!:

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

Chronological

this doesnt look like it will highlight the selected items - it will just set all the text to black and background to white – Estefanaestel