How to set QComboBox menu background transparent?

Question

I'm trying to create a combo box with rounded borders including the pop-up menu, but when I set a border-radius, it doesn't apply to the background:

Image demonstrating the issue

While searching for a way to remove this background, I found this answer: Rounded QComboBox without square box behind

To reproduce:

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
{
    ui.setupUi(this);

    QComboBox* comboBox = new QComboBox(this);
    
    comboBox->setStyleSheet(R"(
        QComboBox  {
            border-radius: 8px;
            margin: 10px;
            background-color: gray;
            min-height: 32px;
        }
    
        QComboBox QAbstractItemView {
            border-radius: 8px;
            margin: 10px;
            background-color: gray;
        }
    )");
    
    comboBox->move(100, 100);
    comboBox->addItem("1");
    comboBox->addItem("2");
    
    comboBox->view()->window()->setWindowFlags( Qt::Popup | Qt::FramelessWindowHint |Qt::NoDropShadowWindowHint);
    comboBox->view()->window()->setAttribute(Qt::WA_TranslucentBackground);

}

It does remove the background, but it lets a black background visible for a short:

How can I get rid of this black background?

Here's everything I already tried that didn't work:

    if (comboBox->view()->parentWidget())
    {
        auto p = comboBox->view()->parentWidget();
        p->setWindowOpacity(0);
        p->setWindowFlags( Qt::Popup | Qt::FramelessWindowHint |Qt::NoDropShadowWindowHint);
        p->setAttribute(Qt::WA_TranslucentBackground);
        p->setHidden(true);
        p->setAutoFillBackground( false );
    }

    comboBox->setAutoFillBackground( false );
    comboBox->view()->setAutoFillBackground( false );
    comboBox->view()->viewport()->setAutoFillBackground(false);
    comboBox->view()->window()->setAutoFillBackground(false);

    //comboBox->view()->setAttribute(Qt::WA_TranslucentBackground);
    //comboBox->view()->viewport()->setAttribute(Qt::WA_TranslucentBackground);
    //comboBox->view()->window()->setAttribute(Qt::WA_TranslucentBackground);

    comboBox->view()->setWindowOpacity(0);
    comboBox->view()->viewport()->setWindowOpacity(0);
    comboBox->view()->window()->setWindowOpacity(0);

    //comboBox->view()->setHidden(true);
    //comboBox->view()->viewport()->setHidden(true);
    //comboBox->view()->window()->setHidden(true);

    QPalette palette = comboBox->view()->palette();
    palette.setColor(QPalette::Window, Qt::transparent);
    comboBox->view()->setPalette(palette);

JoeHsu · Answer 1 · 2022-12-30T03:16:46.693

Try this. I fixed this problem before.

void setSelectComboBoxStyle(QComboBox* comboBox)
{
    comboBox->setStyleSheet("QComboBox {"
                                "border:2px solid rgb(20,150,225);"
                                "border-radius: 10px;"
                                "padding-left: 5px;"
                                "background-color: white;"
                                "font: bold;"
                                "font-size: 16px;"
                                "color: rgb(107,107,107);}"
                            "QComboBox::drop-down{"
                                "border:none;"
                                "subcontrol-position: top right;"
                                "subcontrol-origin: padding;"
                                "width:40px;}"
                            "QScrollBar:vertical {"
                                "border: 1px transparent rgb(213, 218, 223);"
                                "background:rgb(213, 218, 223);"
                                "border-radius: 2px;"
                                "width:6px;"
                                "margin: 2px 0px 2px 1px;}"
                            "QScrollBar::handle:vertical {"
                                "border-radius: 2px;"
                                "min-height: 0px;"
                                "background-color: rgb(131, 131, 131);}"
                            "QScrollBar::add-line:vertical {"
                                "height: 0px;"
                                "subcontrol-position: bottom;"
                                "subcontrol-origin: margin;}"
                            "QScrollBar::sub-line:vertical {"
                                "height: 0px;"
                                "subcontrol-position: top;"
                                "subcontrol-origin: margin;}");

    QListView *view = new QListView(comboBox);
    view->setStyleSheet("QListView{top: 2px;"
                            "border:2px solid rgb(20,150,225);"
                            "border-radius: 8px;"
                            "background-color: white;"
                            "show-decoration-selected: 1;"
                            "margin-left: 0px;"
                            "margin-top: 6px;"
                            "padding-left: 5px;"
                            "padding-right: 6px;"
                            "padding-top: 6px;"
                            "padding-bottom: 2px;"
                            "font: bold;"
                            "font-size: 16px;}"
                        "QListView::item{"
                            "height: 30px;"
                            "background-color: white;"
                            "color: rgb(107,107,107);}"
                        "QListView::item:hover{"
                            "background-color: rgb(20, 150, 225);"
                            "color: white;}");
    view->setCursor(Qt::PointingHandCursor);
    comboBox->setView(view);
    comboBox->setMaxVisibleItems(5);
    comboBox->setFixedSize(500,45);
    comboBox->view()->window()->setWindowFlags( Qt::Popup | Qt::FramelessWindowHint |Qt::NoDropShadowWindowHint);
}

qt 6.2.3 version:

void setSelectComboBoxStyle(QComboBox* comboBox)
{
 comboBox->setStyleSheet("QComboBox {"
                                    "combobox-popup: 0;"
                                    "background: transparent;"
                                    "border:2px solid rgb(20,150,225);"
                                    "border-radius: 10px;"
                                    "padding-left: 5px;"
                                    "background-color: white;"
                                    "font: bold;"
                                    "font-size: 16px;"
                                    "color: rgb(107,107,107);}"
                                "QComboBox::drop-down{"
                                    "border:none;"
                                    "subcontrol-position: top right;"
                                    "subcontrol-origin: padding;"
                                    "width:40px;}"
                                "QScrollBar:vertical {"
                                    "border: 1px transparent rgb(213, 218, 223);"
                                    "background:rgb(213, 218, 223);"
                                    "border-radius: 2px;"
                                    "width:6px;"
                                    "margin: 2px 0px 2px 1px;}"
                                "QScrollBar::handle:vertical {"
                                    "border-radius: 2px;"
                                    "min-height: 0px;"
                                    "background-color: rgb(131, 131, 131);}"
                                "QScrollBar::add-line:vertical {"
                                    "height: 0px;"
                                    "subcontrol-position: bottom;"
                                    "subcontrol-origin: margin;}"
                                "QScrollBar::sub-line:vertical {"
                                    "height: 0px;"
                                    "subcontrol-position: top;"
                                    "subcontrol-origin: margin;}");

    QListView *view = new QListView(comboBox);
    view->setStyleSheet("QListView{top: 2px;"
                                "border:2px solid rgb(20,150,225);"
                                "border-radius: 8px;"
                                "background-color: white;"
                                "show-decoration-selected: 1;"
                                "padding-left: 5px;"
                                "padding-right: 6px;"
                                "padding-top: 6px;"
                                "padding-bottom: 2px;"
                                "font: bold;"
                                "font-size: 16px;}"
                            "QListView::item{"
                                "height: 30px;"
                                "background-color: white;"
                                "color: rgb(107,107,107);}"
                            "QListView::item:hover{"
                                "background-color: rgb(20, 150, 225);"
                                "color: white;}");
    view->setCursor(Qt::PointingHandCursor);
    comboBox->setView(view);
    comboBox->setMaxVisibleItems(5);
    comboBox->view()->setVerticalScrollBarPolicy(Qt::ScrollBarAsNeeded);
    comboBox->setFixedSize(500,45);
    comboBox->view()->window()->setWindowFlags( Qt::Popup | Qt::FramelessWindowHint |Qt::NoDropShadowWindowHint);
}

Hello, i have tested it however, the background is not transparent its white, when i set it transparent happens the same thing in my gif. — Cesar, Dec 30 '22 at 02:58
https://i.imgur.com/V0YtPXZ.png when i change to transparent it became black. — Cesar, Dec 30 '22 at 03:01
try adding `"background: transparent;"` in QComboBox styleSheet. — JoeHsu, Dec 30 '22 at 05:35

score 0 · Answer 2 · answered Jan 09 '23 at 09:47

Using Qt 5.15.2, here is what it work on my machine:

    QComboBox *comboBox = new QComboBox(this);
    comboBox->setStyleSheet("QComboBox {"
                            "combobox-popup: 0;"
                            "border-radius: 8px;"
                            "margin: 10px;"
                            "background-color: gray;"
                            "min-height: 32px;"
                            "}");

    comboBox->view()->setStyleSheet("QListView{"
                                    "border-radius: 8px;"
                                    "background-color: gray;"
                                    "margin: 10px;"
                                    "}");

    comboBox->move(100, 100);
    comboBox->addItem("1");
    comboBox->addItem("2");


    comboBox->view()->window()->setWindowFlags(Qt::Popup | Qt::FramelessWindowHint
                                               | Qt::NoDropShadowWindowHint);
    comboBox->view()->window()->setAttribute(Qt::WA_TranslucentBackground);
}

How to set QComboBox menu background transparent?

2 Answers2