Customize the Appearance

You can configure the drop-down field using the dropDownOptions object that contains fields described in the Popup Configuration section. You can also specify a custom template for the drop-down button in the dropDownButtonTemplate option.

$(function () {
    var fruits = ["Apples", "Oranges", "Lemons", "Pears", "Pineapples"];
        value: fruits[0],
        dataSource: fruits,
        dropDownOptions: {
            title: "Fruits",
            showTitle: true,
            fullScreen: true,
            showCloseButton: true
        dropDownButtonTemplate: function() {
            return $("<img>", { src: "images/icons/custom-dropbutton-icon.svg", class: "custom-icon" });
        contentTemplate: function(e) {
            var $list = $("<div>").dxList({
                dataSource: e.component.option("dataSource"),
                selectionMode: "single",
                onSelectionChanged: function(arg) {
                    e.component.option("value", arg.addedItems[0]);
            return $list;