德布克。将下拉列表设置为必需不会自动在 DASH 中勾勒出空下拉列表

Question

我正在创建一个绘图Dash表单，并使用引导dbc.Select()创建下拉列表。我希望它用红色边框勾勒出来，就像我在dbc.Input()框中一样，当没有选择任何内容时，但它似乎不起作用。我做错了什么？我像设置dbc.Input()一样设置required = True，但没有大纲：

dbc.Select(
id="temperature",
required=True,
options=[{'label': 'Heated', 'value': 'Heated'},
{'label': 'Ambient', 'value': 'Ambient'},
{'label': 'N/A', 'value': 'N/A'}],
value=temperature[0]
),

Answer 1

不确定为什么所需字段不适用于dbc.Select，但有一个变通方法可以让所需字段适用于它。

您可以通过选择下拉列表的值或使用dcc.Interval并检查是否为dropdown.value is None来触发回调。你也可以在下拉列表中添加一个空选项，并将复选框扩展到dropdown.value is None or dropdown.value == ""，以防用户选择它。如果条件为true，则将required属性设置为true，并将一些css样式用于：required pseudo-class设置为某种颜色(例如#SOME_INPUT:required {border: 1px solid red;}).

以下内容可以用作模板：

select = dbc.Select(
id="dropdown-required",
required=True,
options=[
{'label': '', 'value': ''},
{'label': 'Heated', 'value': 'Heated'},
{'label': 'Ambient', 'value': 'Ambient'},
{'label': 'N/A', 'value': 'N/A'}],
)
app.layout = html.Div([select])
@app.callback(
Output("dropdown-required", "required"),
Input("dropdown-required", "value")
)
def set_dropdown_required(value):
res = (
True if value is None or value == "" 
else False
) 
return res

以及assets/style.css:下的一些css样式

#dropdown-required:required {
border: 1px solid red;
}