QComboBox style for choosen item in drop-down list

nayana picture nayana · Apr 29, 2015 · Viewed 22.6k times · Source

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:

enter image description here

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):

enter image description here

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.

Answer

nayana picture nayana · May 15, 2015

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:

enter image description here