QComboBox style for choosed item in drop-down list



  • I asked the same question on stack overflow.. nobody could answer so far..

    I want to style the highlightation of choosed(not selected! see below) item in drop-down of combobox.

    The difference to other questions is that I do not want to style "selected" item(hovered with mouse) .. BUT I am interested in styling the already choosed item.

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

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

    What I have is this:

    enter image description here

    Notice the 17th item which has ticker 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 choosed item (which is 17th item)

    UPDATE 1

    I tested to set ::item:checked stylesheet but it didnt helped:

    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



  • The ticker is where the icons are placed. Maybe your complicated stylesheet somehow eliminated or reduced to zero the space for icons in the combobox.


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.