QCombobox stylesheet issue
-
I tried adjusting the style of me combosox. So that the dropdown menu has rounded corners, just like the combobox itself. This works partially. You can see the rounded dropdown menu but behind it you can also see the defaul square dropdown menu from Qt, i presume. I dont now how to get rid of it.!
177d1d6c-9cf6-46f3-922f-88f4cceb8379-image.png
This is my stylesheet:
QString cleanComboBoxStyle1 =
"QComboBox {"
" border: 1px solid #CDE0C9;" // Light sage border
" border-radius: 6px;"
" color: #2C6975;" // Dark teal text
" background-color: white;"
" padding: 6px 12px;"
" font-size: 12px;"
" min-height: 18px;"
"}"
"QComboBox:hover {"
" border-color: #68B2A0;" // Medium teal border on hover
" background-color: #F5F5F5;" // Off-white background
"}"
"QComboBox:focus {"
" border-color: #2C6975;" // Dark teal border on focus
" background-color: white;"
"}"
"QComboBox::drop-down {"
" subcontrol-origin: border;"
" subcontrol-position: right;"
" width: 10px;"
" height: 20px;"
" border: none;"
" background-color: #E0ECDE;"
"}"
"QComboBox::down-arrow {"
" color: #68B2A0;" // Medium teal arrow
" width: 12px;"
" height: 12px;"
"}"
"QComboBox QAbstractItemView {"
" border: 1px solid #CDE0C9;"
" background-color: white;"
" color: #2C6975;"
" selection-background-color: #E0ECDE;" // Very light sage selection
" selection-color: #2C6975;"
" outline: none;"
" border-radius: 6px;"
" show-decoration-selected: 1;"
"}"
"QComboBox QAbstractItemView::item {"
" padding: 8px 12px;"
" color: #2C6975;"
" border: none;"
" background-color: white;"
" min-height: 20px;"
"}"
"QComboBox QAbstractItemView::item:hover {"
" background-color: #F5F5F5;" // Off-white hover
" color: #2C6975;"
"}"
"QComboBox QAbstractItemView::item:selected {"
" background-color: #E0ECDE;" // Very light sage selection
" color: #2C6975;"
"}";After creating my comboboxes, i just apply the stylesheet with the setStyleSheet method.
I would appreciate any help. -
Hi and welcome to devnet,
Shouldn't you set the radius on the drop-down as well ?
