Dropdown border when clicked

Hello everybody

I don’t know, how long this exists, but it can’t be long:
When clicking a dropdown, all of a sudden, there seems to be a border which indicates, that the dropdown is active. This seems to be a browser thing but it doesn’t occur on older projects i published,

how can i get rid of this? doesn’t look very nice and isn’t necessary at all.

Best from Austria,
Jürgen

Can you please post your live link where this dropdown is?

i can’t publish the actual project - i guess my client wouldn’t be very happy :wink:
but i made a test project with just a dropdown:
https://dropdowntest-d6bf6e.webflow.io/

that’s what i get:
41

It is on every dropdown object now, you can test it on your own project

The point of the outline is to show which element is focused while navigating with your keyboard. Here’s some info about how to fully customize that focus state: https://custom-focus.webflow.io/

1 Like

this should be optional! do i have to update all my projects with custom code now? not cool.

No, we’re looking into a fix now that will make this as it was before.

1 Like

@forresto, I understand the purpose of making the navigation cue visible for users who are using accessibility devices / keyboard navigation. Wouldn’t it be possible to detect the keypress and only display when a keystroke is invoked? Is that possible?

An additional issue I am seeing is that it is also leaving a latent border for the last hovered element if you have dropdown on hover. The mouse out does not clear the state.

I’m having the same issue. I thought I was going crazy. I don’t have any hover, focused states on my main nav. Please help.

Republish your sites: we added some code to avoid the browser-default focus outline.

I updated this info, which is still relevant for making custom focus states on the dropdown component:

5 Likes

How do we get our dropdowns to be keyboard accessible like this? Has the component been changed? If so, do we need to rebuild our menus to get this functionality?