Change color of Checklist's checkboxes

Dash Python
1

I have been trying to change the color of the checkboxes in the ‘dcc.Checklist’ component, but haven’t succeeded so far. I see in the documentation that there’s an ‘inputStyle’ input argument, of which I expect I need it to achieve my goal. I cannot find any examples of how to fill in this argument however, so I’m not sure if this is actually what I need. Does anyone have any advice?

Thanks in advance!

2

This is harder than you might think because the checkbox that gets rendered is actually native to the browser.

dbc.Checklist is easier to style if you’re willing to use dash-bootstrap-components and there’s an example in the docs (see “Checked item styles”) which shows you how to do it.

2 Likes
3

Awesome, thanks! I actually looked in the list of dbc components, but I didn’t see ‘Checklist’ so I thought they didn’t have it. Didn’t figure that the list consists of subcategories haha.

1 Like
4

Yeah the categories were somewhat inherited from Bootstrap’s documentation. It might make more sense to split into sections by component, but there are some components that definitely naturally belong together.

Perhaps a better solution is to add a search to the docs.

5

I know I’m waaaay too late to respond, but actually you don’t need dash-bootstrap-components to be able to change the color of the checklist.

Want you want to do is to change the accent-color property, like in this example.

Here is an example of what it would look like:

dcc.Checklist(
  id='...',
  options=[{
      'label': 'whatever',
      'value': 'whatever'
  }],
  value=['whatever'],
  style={
      'accent-color': '#A6192E'
  }
  )
2 Likes