Daq Color-picker style border-radius

Dash Python
1

Hello,

Trying to reproduce the Color picker example: dash_daq.ColorPicker | Dash for Python Documentation | Plotly

In my case, the appearance is different and I detected the error maybe related to the border-radius css style attribute.

I include an image reproducing the error. I would like the color picker to look like the second option (not a round border and transparent color) as is showed in the Dash example (before referenced).

Selection_508
Selection_5081436Ă—706 285 KB

I could achieve the desired appearance from the web browser. However I haven’t been able to modify the style of the Color Picker component in the code :

html.Div([daq.ColorPicker(id='my-color-picker',label='Recolor all plots',value=dict(hex='#7c80f5'),style={'border-radius':'0%! important'})]),

I have been able to get the desired result in the css stylesheet. But the class .cQJXpB changes?

image

Thank you in advance,
Isabel

2

I found the solution adding a change in the css style.
#my-color-picker =id element

#my-color-picker .daq-colorpicker–light__chromepicker {
border-radius: 0% !important;

}

2 Likes
3

To reproduce the Color picker precisely as in the example of dash_daq you have to change the theme to dark by providing the following argument to ColorPicker: theme={“dark”: True}.
Otherwise, it would help if you implemented isaamarod answer.