Formatting text of individual choices in selectInput dropdown menu

Question

I would like format the text of individual choices displayed in a selectInput() dropdown menu. I have a list of text strings with html attributes:

myChoices_list <- c("<b>choice 1</b>", "<b>choice 2</b>", "<i>choice 3 </i>", "<i>choice 4</i>", "<<p style=\"text-indent: 20px\">choice 5</p>")

The html attributes call for bold, italics, and indentations applied to each string. I tried to apply the attributes with the HTML() function in the 'choices' option but with no luck.

ui <- fluidPage(
sidebarPanel(
  selectInput(inputID = "myChoice", "Choice:"
             , choices = HTML(myChoices_list))
  )
) 

While these formats work correctly in the mainPanel by setting an 'escape' option to FALSE in the server segment's output, the option doesn't appear to be available for the dropdown menu in selectInput().

I think the solution might have something to do with tags$style, but I am new to the structure of shiny and designation of text formats. It's also different from How to style an single individual selectInput menu in R Shiny? in that the html formats are already part of the list. The actual list is a large one as well.

Answer 1

Why not use jQuery for that?

 $('#DropdownSelectID').change(function () { var selectedVal = $('#DropdownSelectID :selected').val(); if (selectedVal == '1') { $("#DropdownSelectID").css('cssText', 'font-weight: bold; color: blue'); } else if (selectedVal == '2') { $("#DropdownSelectID").css('cssText', 'color: red'); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <select id='DropdownSelectID'> <option value='0'>-- Select --</option> <option value='1'>Hi</option> <option value='2'>Hello</option> </select>