Changing the border color of the Dash Bootstrap Input Box

Dash Python
1

I have looked all throughout and searched for a solution to changing the blue border that displays when the input box is active.I would like to change it to “warning”. I have also looked at the Dash Mantine input but there appears to be no option for this.

Is there a way to change this?

import dash_bootstrap_components as dbc
from dash import Input, Output, html

text_input = html.Div(
    [
        dbc.Input(id="input", placeholder="Type something...", type="text"),
        html.Br(),
        html.P(id="output"),
    ]
)

@app.callback(Output("output", "children"), [Input("input", "value")])
def output_text(value):
    return value
2

Hi @anarchocaps ,

This could be achieved with css, just add this to your style.css file

.form-control:focus {
        box-shadow: 0 0 0 0.2rem rgba(255, 187, 51, 0.25);
    }
2 Likes
3

thank you. This works great. Another similar problem I am running into - I am attempting to do this same focus with a dropdown menu, and change the color of the selected item when viewing the options. Both are defaulting to blue. I looked at different css posts and sites but could not get this to change. Using the dbc version helps a little but I don’t quite understand how to make the dbc version work with the callback - it is a little more complicated than the dcc version. thank you