daq.ColorPicker, how to remove a border radius?

[AIMPED]

Hi there,

I wanted to use the daq.ColorPicker() but I don’t understand, where a certain border radius is coming from. Take this example:

from dash import Dash, html
import dash_daq as daq

app = Dash(__name__)

app.layout = html.Div([
    daq.ColorPicker(
        id='my-color-picker-1',
        value=dict(hex='#119DFF')
    )
])

if __name__ == '__main__':
    app.run_server(debug=True, port=8055)

You can observe something like a half circle right below the color display. Inspecting the page, there is a border-radius applied on the div, but I’m not able to get rid of it. Actually, I don’t understand where this is coming from, as it does not appear in the example in the docs

I’m not sure, but the only reference I can find concerning a border-radius for the ColorPicker is this one:

plotly/dash-daq/blob/master/src/styled/ColorPicker.styled.js#L47

I tried with some css in the custom.css file but maybe this is not possible because the border radius is set inline with !important, but I’m just guessing here.

[AnnMarieW]

This post might be helpful

Daq Color-picker style border-radius

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; }

[AIMPED]

Thanks @AnnMarieW!

Wow. two topics about that, should have used the forum search correctly. While this solves my issue, it feels like we shouldn’t need to bother with that since in the docs the behaviour is different.

Adding this to my custom.css in the assets folder worked for me:

.cQJXpB .chrome-picker {
    border-radius: 0% !important;
}

[AnnMarieW]

Unfortunately that’s not a long term solution. That weird class name changes.

[AIMPED]

Hmm, I don’t understand the part where the id of the component is involved.

EDIT: I assigned a className ‘haha’ to the color picker and used this in the css file:

.haha .chrome-picker {
    border-radius: 0% !important;
}

Seems to work for now?