Qt Style Sheet Practice (2): Customization of Combo Box QComboBox (2025)

The combo box is an important and widely used component, generally composed of two sub-components: the text drop-down part and the button part. In many application scenarios that require both user selection and manual input, the combo box can meet our needs well. For example, the QQ login box of the chat software we often use is a good application example:

Obviously, users can either manually enter a new QQ number by themselves, or select historical input records in the list box. It is a good way to improve user experience. This blog post focuses on how to customize combo boxes with QSS.

The use of the combo box is very simple. In order to speed up the description, we directly drag a QComboBox control in Qt Designer and drop it into the main window. At this point, we have a simple combo box without doing anything, as follows:

But obviously, we have to add a text, otherwise QComboBox will not display any content. The style of the combo box that appears like this is very common: a text plus a button with an arrow is finished. Since the theme is to use QSS to customize the combo box, the first thing we do is to create a new .qss file and add it to the resource file for compilation. The content of the .qss file is initially prepared as follows:

QComboBox {

border:1pxsolidgray;

border-radius:3px;

padding:1px2px1px2px; # For the text content in the combo box

min-width:9em; # The minimum width of the combo box

}

　　 We give the combo box 3 pixels rounded corners, the border is 1 pixel wide and set the color to gray. See the effect:

The text box part seems to be pretty good, but the button on the right is really ugly and doesn't match the overall style. Let's continue to beautify the buttons. The button is a subcomponent of QComboBox, referred to by ::drop-down. Write the following QSS code:

+ View Code

　　 As you can see, we have set a 3 pixel rounded corner on the upper right corner and the lower right corner of the button respectively. This is because we set rounded corners to the overall border of the combo box. If you do not set rounded corners for the button, the corners of the button will block the rounded corners of the overall frame. In addition, we changed the arrow icon on the button. ::down-arrow is also a subcomponent, we replaced the system default icon with the image attribute. Compare:

Well, the overall style looks more coordinated. Of course, in the customization of the ::drop-down sub-component, we set the subcontrol-position property to top, right. This way the button is on the far right. If you want to place the button on the far left, it is obviously easy. Just set the subcontrol-position to top, left, and then change the padding value of the QComboBox to achieve the goal. Let's pull out the drop-down box to see:

What is the problem? Obviously, the height of the options in the drop-down box is too small and looks awkward. So how to customize the drop-down box? We have a good mimic:

The drop-down box in the login box of 360 Security Guard looks pretty good, and an icon appears on the right side of the option. Now we enter the advanced customization part. See how to improve.

To achieve the above effects, the first thing we need to do is to set the QComboBox to be editable (setEditable()). In this way, the content in the text box can be entered manually. In addition, we also noticed that there is an icon on the right side of the option in the drop-down box, and an icon also appears in the QQ login box. Our most intuitive idea is to use the layout manager (horizontal or vertical) to assemble all components into a whole, and then add them to the drop-down box.

How to do it? Fortunately, QComboBox is alsoModel/ViewFramework to maintain the content of the drop-down box. Therefore, the most direct method is to define a QListWidget, set this QListWidget as the View of the QComboBox, and set the Model of the QListWidget as the Model of the QComboBox. QListWidget is just a View class, so we have to customize the Item in the View class.

Well, derive a subclass from QWidget, implement horizontal layout, and add all subcomponents to it:

+ View Code

　　 The code is very simple, two labels QLabel are defined, one for displaying text and one for displaying icons. Use the horizontal layout manager to add to QWidget.

ThemeRoller::ThemeRoller(QWidget *parent)

: QMainWindow(parent)

{

ui.setupUi(this);

m_listWidget =newQListWidget(this);

// Set the sub-item proxy, otherwise there will be a dashed box around the drop-down box options

m_listWidget->setItemDelegate(newNoFocusFrameDelegate(this));

ui.comboBox->setEditable(true);

ui.comboBox->setModel(m_listWidget->model());

ui.comboBox->setView(m_listWidget);

// Add 5 options in the drop-down box

for(inti = 0; i < 5; ++i)

{

ComboboxItem* item =newComboboxItem(this);

item->setLabelContent(QString("Account") + QString::number(i, 10));

connect(item, SIGNAL(chooseAccount(constQString&)),this, SLOT(onChooseAccount(constQString&)));

QListWidgetItem* widgetItem =newQListWidgetItem(m_listWidget);

m_listWidget->setItemWidget(widgetItem, item);

}

　　 We also associate the chooseAccount() signal of ComboboxItem to the onChooseAccount() slot. In this way, when the user clicks on one of the options, the selected item can be displayed in the text box of the QComboBox. So, how should QSS be written?

+ View Code

　　 is also very simple, just set the height in the option to be consistent with the height of the QComboBox, so that it does not look awkward. Then set the mouse hovering background color for the options. At this point, the entire customization process is over. See how it works:

QComboBox is divided into three custom parts: text box (editable or not), button (arrow mark, border), drop-down box (option height, sub-component layout). From the above, we can use QSS to achieve the effect we want, and the effect is not bad.