Checklist elements styling

Dash Python
1

Hi,

is it possible to somehow assign each checkbox / label in a checklist a diffferent color? I know i can set the color for all elements using the labelClassName property. Right now the only option i see, is to modify the react code by passing in the style through options (similar to value and label) and not setting it for all values at creation time. Have i missed something?

Also for styling the checkboxes, wrapping the options text inside a span is necessary because to remove the default checkbox, opacity has to be set to 0 on the input element and then styling the new span element.(https://www.w3schools.com/howto/howto_css_custom_checkbox.asp)

Thanks

1 Like
2

I’m basically looking for a similar functionality, in that it would be nice to be able to style the checkboxes in general, because the standard one just looks terrible. But I’m not sure whether it’s possible to do something like this:

https://paulund.co.uk/how-to-style-a-checkbox-with-css

Has anybody done something similar so far?

3

my testcase not work as expected. https://codepen.io/zh1611/pen/RJxeGg.css

dcc.Checklist(
id=‘seldomain’,
options=[{‘label’: dom, ‘value’: dom} for dom in [‘Timing’, ‘Noise’]],
values=[‘Timing’, “Noise”],
inputClassName=‘flatRoundedCheckbox’
),

expected output:
image

output:
image

4

Would be nice if the checklist accepted a dict containing a ‘style’ tag and allowing for ‘label’ and ‘box’ specific styling.

For example:

{
    'label': 'example label',
    'value': 'example value',
    'style': {
                   'label': {'color': 'red'},
                   'box': {'shape': 'round'}
               }
}

I’m just using ‘shape’ there as a filler tag as I’m not privy to standard checkbox tags. Functionality like this would be very nice. the ‘labelStyle’ tag in Checklist is insufficient because we are unable to specify the style of each label by passing in an array the same way as it is passed for ‘label’ and ‘value’.

5

There is a very hacky way of getting all Checklist items styled individually.

import dash
import dash_core_components as dcc
from random import random

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

def random_color():
    return ['red', 'green', 'blue'][int(random()*2)]

checkbox_names = ['1', '2', '3']

html.Div([
    dcc.Checklist(
        id='randomize',
        options=[{'label': 'randomize!', 'value': 'randomize}]
    ),
    *[dcc.Checklist(
        id=i,
        options=[{'label': i, 'value': i}],
        value=[i],
        labelStyle={'color': random_color()}
    ) for i in checkbox_names],
])

@app.callback(
    [*[Output(i, 'labelStyle') for i in checkbox_names]],
    [Input('randomize', 'value')]
)
def randomize_colors(ignored):
    return (*[{'color': random_color()} for i in checkbox_names])

This code will allow for randomizing the color of the text of the checkboxes. Hopefully this helps.

EDIT: Actually not that hacky, official documentation does something very similar.

6

You can use the nth-child CSS selector to apply different styles to different options. Check out this example