css - Customize html output for a field's droplist options -

i have field called icon, droplist sourced folder in content tree. list not show text value(shown in screen shot) utilize icon font , display actual icon like. customizing content editor's droplist field from:

<option value="gears">gears</option> 

to

<option value="gears">gears <span class="my-icon-font-gears"></span></option> 

is there documentation on how modify outputted html droplist, , modify content editor page load link, in case font-file.

suggest use droplink field type instead of droplist, since value stored guid , lead less longer term problems if link item renamed or moved. in case need custom field, inherit sitecore.shell.applications.contenteditor.lookupex (which droplink field type) , override dorender() method custom markup require.

it's not possible embed span tag since option tag cannot contain other tags invalid html. adding cause browser strip out. can set class on option , style that.

`<option value="gears" style="my-icon-font-gears">gears</option>` 

here sample code achieve field.

using system; using system.web.ui; using sitecore; using sitecore.data.items; using sitecore.diagnostics; using sitecore.globalization;  namespace myproject.cms.custom.controls {     public class styledlookupex : sitecore.shell.applications.contenteditor.lookupex     {         private string _styleclassfield;         private string styleclassfield         {                         {                 if (string.isnullorempty(_styleclassfield))                     _styleclassfield = stringutil.extractparameter("styleclassfield", this.source).trim();                 return _styleclassfield;             }         }          // method copied pasted base class apart thhe single lined marked below         protected override void dorender(htmltextwriter output)         {             assert.argumentnotnull(output, "output");             item[] items = this.getitems(sitecore.context.contentdatabase.getitem(this.itemid, language.parse(this.itemlanguage)));             output.write("<select" + this.getcontrolattributes() + ">");             output.write("<option value=\"\"></option>");             bool flag1 = false;             foreach (item obj in items)             {                 string itemheader = this.getitemheader(obj);                 bool flag2 = this.isselected(obj);                 if (flag2)                     flag1 = true;                 /* option markup modified class added */                 output.write("<option value=\"" + this.getitemvalue(obj) + "\"" + (flag2 ? " selected=\"selected\"" : string.empty) + " class=\"" + obj[styleclassfield] + "\" >" + itemheader + "</option>");             }             bool flag3 = !string.isnullorempty(this.value) && !flag1;             if (flag3)             {                 output.write("<optgroup label=\"" + translate.text("value not in selection list.") + "\">");                 output.write("<option value=\"" + this.value + "\" selected=\"selected\">" + this.value + "</option>");                 output.write("</optgroup>");             }             output.write("</select>");             if (!flag3)                 return;             output.write("<div style=\"color:#999999;padding:2px 0px 0px 0px\">{0}</div>", translate.text("the field contains value not in selection list."));         }     } } 

this field adds custom properties allow specify linked field use style class. assumption have single line text field on linked item specify css class.

usage: set source property of field in following format:

datasource={path-or-guid-to-options}&styleclassfield={fieldname} 

e.g. datasource=/sitecore/content/lookup/iconfonts&styleclassfield=iconclassname

to use new field compile above code in project, switch on core database , create new field type – can duplicate existing droplink field located in /sitecore/system/field types/link types/droplink. delete existing control field , instead set assembly , class fields point implementation.

you need load custom css stylesheet style defintions content editor, can achieve following blog post.