Extended SelectionFactory

ExtendedSelectionEditor.css

.Sleek .select-with-icons.dijitSelectMenu td.dijitMenuItemIconCell {
    display: table-cell;
}

.Sleek .select-with-icons.dijitSelectMenu td .dijitInline.dijitMenuItemIcon {
    display: inline-block;
}


/* ******************* */
/* CUSTOM STYLES       */
/* ******************* */

.dijitSelectMenu .error-item {
    background-color: #FF7276;
}

ExtendedSelectionEditor.js

define([
    "dojo/_base/declare",
    "epi-cms/contentediting/editors/SelectionEditor",

    "xstyle/css!./ExtendedSelectionEditor.css"
], function(
    declare,
    SelectionEditor
) {
    return declare([SelectionEditor], {
        openDropDown: function () {
            this.dropDown.domNode.classList.toggle("select-with-icons", true);
            this.dropDown.domNode.classList.toggle(this.name, true);

            this.inherited(arguments);
        },

        _getMenuItemForOption: function (option) {
            var menuItem = this.inherited(arguments);

            if (this.params.extendedSelection) {
                var customOption = this.params.extendedSelection.find(function (x) { return x.value === option.value });
                if (customOption) {
                    if (customOption.iconClass) {
                        menuItem.set("iconClass", customOption.iconClass);
                    }
                    if (customOption["class"]) {
                        menuItem.set("class", customOption["class"]);
                    }
                }
            }

            return menuItem;
        }
    });
});

ExtendedSelectItem.cs

 public class ExtendedSelectItem: SelectItem
 {
     public string Class { get; set; }

     public string IconClass { get; set; }
 }

ExtendedSelectOneAttribute.cs

[AttributeUsage(AttributeTargets.Property, AllowMultiple = false)]
 public class ExtendedSelectOneAttribute : Attribute, IDisplayMetadataProvider
 {
     public virtual Type SelectionFactoryType { get; set; }

     private readonly IServiceProvider _serviceProvider;

     public ExtendedSelectOneAttribute()
     {
         _serviceProvider = ServiceLocator.Current.GetInstance<IServiceProvider>();
     }

     public void CreateDisplayMetadata(DisplayMetadataProviderContext context)
     {
         var extendedMetadata = context.DisplayMetadata.AdditionalValues[ExtendedMetadata.ExtendedMetadataDisplayKey] as ExtendedMetadata;

         if (extendedMetadata == null)
         {
             return;
         }

         var originalFactory = new SelectOneAttribute
         {
             SelectionFactoryType = this.SelectionFactoryType
         };
         originalFactory.CreateDisplayMetadata(context);

         var selectionFactory = (ISelectionFactory)ActivatorUtilities.CreateInstance(_serviceProvider, this.SelectionFactoryType);

         extendedMetadata.EditorConfiguration["extendedSelection"] =
             selectionFactory.GetSelections(extendedMetadata).ToList()
                 .OfType<ExtendedSelectItem>()
                 .Select(x => new
                 {
                     x.Text,
                     x.Value,
                     x.Class,
                     x.IconClass
                 });

         extendedMetadata.ClientEditingClass = "alloy/Editors/ExtendedSelectionEditor";
     }
 }

MySelectionFactory.cs

public class MySelectionFactory : ISelectionFactory
 {
     public IEnumerable<ISelectItem> GetSelections(ExtendedMetadata metadata)
     {
         return new[]
         {
             new ExtendedSelectItem
             {
                 Text = "Info",
                 Value = "1",
                 IconClass = "dijitReset dijitInline dijitIcon epi-iconInfo epi-icon--medium",
                 Class = "info-item"
             },
             new ExtendedSelectItem
             {
                 Text = "Info",
                 Value = "1",
                 IconClass = "dijitReset dijitInline dijitIcon epi-iconWarning epi-icon--medium",
                 Class = "warning-item"
             },
             new ExtendedSelectItem
             {
                 Text = "Info",
                 Value = "1",
                 IconClass = "dijitReset dijitInline dijitIcon epi-iconError epi-icon--medium",
                 Class = "error-item"
             }
         };
     }
 }

StandardPage.cs

    public class StandardPage : SitePageData
    {
        // ... more properties
    
        [Display(Name = "Single select", GroupName = SystemTabNames.Content, Order = 250)]
        [ExtendedSelectOne(SelectionFactoryType = typeof(MySelectionFactory))]
        public virtual string SingleSelect1 { get; set; }
    }

In the example above dropdown is displayed with icons and custom backgroung for some items.