Thanks for your question.
To remove the border of the input on a DatePickerSingle component you must use the following css file and add custom css to your app:
and also add this to your dash app:
external_css = ["https://codepen.io/alishobeiri/pen/yoRPKm.css?v=10000"]
for css in external_css:
external_css variable you see there is just my codepen file containing the css line I described above. Hopefully that will do the trick.
In regards to the rest of your question the css files for the components are not served locally so changing the file will have no effect as it’s actually being loaded from: https://firstname.lastname@example.orgemail@example.com
If you want to serve the files locally you must add the following line to your application replacing
app with whatever your Dash app is named:
app.css.config.serve_locally = True
For now, I think the best way to style these components is to use their predefined classNames to override preexisting css attributes similar to what we do in the CodePen file. The best way to identify the classNames is to use the inspector tool
Ctrl+Shift+J (Windows / Linux) or
Cmd+Opt+J (Mac) on Chrome or use the equivalent on other browsers.
I thinking adding the className attribute to the DatePicker component could definitely be a possibility but I’m going to look more into it to figure out if it’s actually possible.