[BUG] Element :active state not applied in Firefox for Slider and Dropdown (Dash 3.3.0)

[jalbastefan828]

Dash packages: dash 3.3.0 Environment:

• OS: Windows 10
• Browser: Firefox (145.0.2)
• VS Code with Jupyter Notebook (the issue does not appear in the Jupyter output inside VS Code)
• Also tested on Chrome 142.0.7444.176 and Edge 142.0.3595.94 (works correctly on these browsers).

Describe the bug When using Dash components with custom CSS, the :active pseudo-class is not applied in Firefox:

• On a dcc.Slider handle, the styles (border, box-shadow, background-color) do not appear while dragging.
• On a dcc.Dropdown, clicking an option does not trigger the :active state for the selected item.
• On Chrome and Edge, both Slider and Dropdown handle :active correctly.
• In Firefox DevTools, the :active styles do not appear at all in the Styles tab.

Expected behavior The handle and dropdown option styles (:active) should apply correctly in Firefox, just like in Chrome and Edge.

Screenshots / Video I have attached a video demonstrating the issue. In the video, you can see:

• The Slider and Dropdown styles updating correctly in Chrome, but not in Firefox.
• In the CSS code shown in the video, some lines are commented out — these are previous attempts to fix the problem that all failed.
• Video: https://www.youtube.com/watch?v=hv0rOko72Pg

[AnnMarieW]

Hi @jalbastefan828

Can you please include a complete minimal example that reproduces the issue? Just need to include the Slider and Dropdown, plus your .css file.

[jalbastefan828]

Sure! I will leave below the simplified Python and CSS code

Python code:

from dash import Dash, dcc, html


slider = dcc.Slider(
   id = "slider",
   min=0,
   max=3,
   marks = {0:'Thur', 1:'Fri', 2:'Sat',3:'Sun' },
   step=None,
   value=0,
   className = "my-slider"           
)

dropdown = dcc.Dropdown(
    id = "dropdown",
    options = ["Female", "Male", "Both"],
    clearable = False,
    className = "my-dropdown",
    placeholder = "Select gender",
    searchable=False
    
)

app = Dash()
app.layout = html.Div([slider, dropdown])


app.run(host="127.0.0.1", port=8050, debug=False)

CSS Code: Slider

.rc-slider-handle:active {
    box-shadow: 0px 0px 18px 9px rgba(0, 64, 255, 0.25) !important;
    border-color: #449dd1 !important;
}

Dropdown

.my-dropdown .Select-control:active {
    box-shadow: 0px 0px 18px 9px rgba(0, 64, 255, 0.25) !important;
    border-color: #449dd1 !important;
}

As mentioned, all CSS effects are working correctly — I can fully customize any part of the dropdown and the slider. However, the only thing that does not work in Firefox is the :active state. The Python code is written inside a Jupyter Notebook (.ipynb) file, and the CSS files are separated (slider.css and dropdown.css) inside an assets folder.

[AnnMarieW]

Firefox handles the active state differently than Chrome.

You can try using the focus state or the is-focused class

.rc-slider-handle:focus {
    box-shadow: 0px 0px 18px 9px rgba(0, 64, 255, 0.25) !important;
    border-color: #449dd1 !important;
}

.my-dropdown.is-focused {
    box-shadow: 0px 0px 18px 9px red !important;
    border-color: #449dd1 !important;
}

[jalbastefan828]

I understand. Thank you! But I still have one more question. I noticed that in Dash version 4.0.0, the slider will use Radix UI. Do you think that would work?

[AnnMarieW]

You could give it a try! The pre-release is available now. pip install dash==4.0.0rc3 And it looks like the rc4 release will be available sometime today. Since the underlying component has changed, you will have to use different selectors.

A nice feature of V4 is that you can change the accent color for the focus with a CSS variable. However there is no CSS variable for the box-shadow, so you'll have to find the selector for that one.

[ndrezn]

Looks like we won't need to make changes in Dash to enable the behaviour you're looking for, but feel free to open another issue or re-open this one if you run into this again. Cheers!