Tkinter how to change combobox widget arrow image

Question

I'm trying to change the arrow image in a combobox widget. I understand that you need to create a new element and style it. I have been looking for info on how to do this and can't seem to find anything online. In the code below I create the image and display it in a label, but I want that image as the combobox arrow image.

from tkinter import *
from tkinter import ttk

root_window = Tk()
style = ttk.Style()

photo = """
R0lGODlhDQAQAPQAAFw1Zl42Z2A6amE6amI7a2I8a2I8bKeHqK6BqbSLsLWLsLuV
t7ufu7yfu72hvL6ivb6ivr+jvsKgvsWlwseow8iqxcmrxs+1zNC2zdO70dS90tW9
0tW+0wAAAAAAAAAAACH5BAEAAB0ALAAAAAANABAAAAVMYCd2QFmOKJltGZCOwMZt
7kvKtH3P9RvzutgmZ4tdiL6NBUkyGTaSjMHkEjgyGcuiwnIIRoWIJUG2eFPhCYJy
fhUkmLbNcPjqRL1RCAA7
"""

photo = PhotoImage(data=photo)
l = ttk.Label(root_window, image=photo).grid()

style.layout(
    'Mystyle.TCombobox', [(
        'Combobox.field', {
            'sticky': NSEW,
            'children': [(
                'Combobox.downarrow', {
                    'side': 'right',
                    'sticky': NS
                }
            ), (
                'Combobox.padding', {
                    'expand': '1',
                    'sticky': NSEW,
                    'children': [(
                        'Combobox.textarea', {
                            'sticky': NSEW
                        }
                    )]
                }
            )]
        }
    )]
)

style.element_create('Mystyle.TCombobox.downarrow', 'image', photo)

cbo = ttk.Combobox(root_window, values=('one', 'two', 'three'), style='Mystyle.TCombobox')
cbo.grid()

root_window.mainloop()

score 2 · Accepted Answer · answered Nov 24 '19 at 22:30

You're very close, you just need to use your element in your custom style. Notice in the following example how Mystyle.TCombobox.downarrow is used as one of the children in the combobox:

style.element_create('Mystyle.TCombobox.downarrow', 'image', photo)
style.layout(
    'Mystyle.TCombobox', [(
        'Combobox.field', {
            'sticky': NSEW,
            'children': [(
                'Mystyle.TCombobox.downarrow', {
                    'side': 'right',
                    'sticky': NS
                }
            ), (
                'Combobox.padding', {
                    'expand': '1',
                    'sticky': NSEW,
                    'children': [(
                        'Combobox.textarea', {
                            'sticky': NSEW
                        }
                    )]
                }
            )]
        }
    )]
)

Excellent, thank you. Where can one find the best documentation for creating custom widgets for ttk? — Daniel Huckson, Nov 24 '19 at 22:42

Tkinter how to change combobox widget arrow image

1 Answers1

Linked