Is it possible to highlight part of the label in Checkboxes in Dash

Question

Taking the example from https://dash.plot.ly/dash-core-components/checklist, I am looking for a way to highlight New York (not including City) by coloring the background yellow.

If I code in html directly, I would use a span tag, but I am not sure how to it the Dash way. Here, I also included the source code from the above url. I tried replacing the label string with

'<span style="background-color:yellow">New York</span> City'

but it doesn't work.

from dcc.Checklist(
    options=[
        {'label': 'New York City', 'value': 'NYC'},
        {'label': 'Montréal', 'value': 'MTL'},
        {'label': 'San Francisco', 'value': 'SF'}
    ],
    values=['MTL', 'SF']
)

Answer 1

There is not a Dash way to do this. The label is just a string, and the styles have nothing to separate the words, so you could only set the style as all or nothing.

This answer deals with a related issue, and requires using JS to handle selecting the words and changing the styles. That may get you there, but you've certainly left Dash territory at that point.