Emoticon Selection in ASP.Net MVC

I had to implement a good/bad/neutral selection UI in an ASP.Net MVC application.

This simple task turned out to be rather cumbersome, given different browsers implementing different things differently, and the MVC framework restricting access to generated markup.

I first thought about a DropDownList (i.e.) rendering a set of emoji, only to find

• you cannot pass a C# emoji as SelectListItem.Text

new SelectListItem {Text = "\u1F60A" }

• you cannot add the emoji HTML entity 😊 astext (at least not in Chrome)
• you cannot add a @class parameter to SelectListItem
• you cannot add a background-image:url() definition to an
• you cannot add HTML tags inside an(
  except for Firefox

  )

However, I found code to overcome the limitations of SelectListItem, either by copying and extending code from the MS MVC framework, or by XML manipulation of the built-in HTML generator.

Maybe the dropdown list was just the wrong path to follow, so I searched for ways to style radiobuttons, and found this nice demo on codepen.

I modified the demo to fit my needs, and voilà, here’s my first codepen:

A radiobutton-based emoji selector

Update: Apparently, IE does not render an <img> inside a <label> clickable, unless you specify pointer-events: none.