Button Border Colour?

I noticed this when trying out and using a button in the new modal but it is also occurring with a button just on its own. It seems to have a phantom inner blue border, not set in the settings?

CleanShot 2025-04-09 at 18.36.34

Is this a bug or may I have got something set wrong?

PS. The colours are just to highlight the point! :wink:

I’m guessing you have the button selected :wink: (and labels are off in the editor).

Try selecting a different component on the page…

I guess you are right! :flushed_face:

haha, easily done :rofl:

I have this same problem with a phantom blue border, - but it appears on the published website! Strange enough only on the first button in a menu-list with several buttons. the others are ok. How can I get rid of it?
Please have a look at it on a mobile view:

https://test2.riccardodelfino.eu

and have a look at my screenshots.
Thank you for any help or suggestions!

This is an outline for accessibility.

It depends how which component you’re using to create that menu, but the following tailwind class will remove the blue outline: outline-0

I can’t quite tell from your site which combination of components you’re using to create that menu, so if you’re not sure where to add that class, can you post a screenshot of the tree structure of the page or send me a link to your project file? :slight_smile:

Thank you for your reply, Ben! :slightly_smiling_face:

Here is a screenshot of the tree structure, I used Dropdown and Modal to create this menu (it was quite a bit of work, trying to find a way to make a bilingual site).

How could I send you the project file? Via WeTransfer, or else…???

Where and how can I insert the tailwind class you mentioned? I am a dummie with everything concerning codes and classes. :smirking_face:

And may I ask a second question: I can’t figure out how to make the mobile dropdown menu being fixed. Actually it is moving up and down on mobile, which is a bit confusing and annoying (please see screen-video 1 from my mobile).
This happens only on mobile device, but not when I simulate a mobile on my computer (see screen-video 2 from my computer).

Thank you very much for your help! :smiley:

Can anybody help me with the following two problems with the menu I have built for to be able to have a bilingual site? I am completely new to Elements (coming from Classic) and can’t find a solution myself… :slightly_frowning_face:

1: a blue border appears on the first button in the mobile menu-list with several buttons. The others are ok.

I have inserted the tailwind class Ben mentioned above: outline-0 to this button component and all instances above this first button, but it didn’t solve the problem.

2: I can’t figure out how to make the mobile dropdown menu being fixed. Actually it is moving up and down on mobile, which is a bit confusing and annoying (please see screen-video 1 from my mobile in this forum post).This happens only on mobile device, but not when I simulate a mobile on my computer (please see screen-video 2 from my computer in this forum post).

Here is the link to my project:
elementsapp://downloadDocument/34eC0a5NcKua

I am very thankful for any help! :folded_hands: Thank you all in advance for your support!

Hi @6harps

I recorded a quick video showing how to fix the issue:

You just need to add the following CSS class to the Button components: focus:outline-0 focus:transition-none

Let me know if you need any further help :slight_smile:

Hi Ben,
thank you for the video. I did everything EXACTLY how you showed in the video, but the blue border is still there! :slightly_frowning_face:
I am afraid I need your further help… Could you please have a look?
Here is the link to the new modified project file. Thanks!

elementsapp://downloadDocument/QMC0n2tE8MjQ

@ben
Hi Ben,
the website is now finished. You can have a look at it at the test-URL:

https://test2.riccardodelfino.eu

Unfortunately, the only downside is that this blue border (outline for accessibility) is still there, even though I followed the instructions in your video to the letter and inserted the CSS class to the Buttons components.
Could you please have another look at the project to see what might be causing this? I’ll upload the latest version to the cloud again; here’s the link:

elementsapp://downloadDocument/e7LLZ7jTXdyb
https://dl.elementsapp.cloud/g/e7LLZ7jTXdyb

Thank you very much for your help!

Best regards, Riccardo

Hi @6harps

The issue is that the first item in the Modal is now a Text component, rather than a Button.

The easiest fix is probably to change the Text component to a Button, unless there’s a specific reason why you needed/wanted it to be Text?

Hi Ben,
this is not the reason, I have tried this before, even with a button as first item (and with ONLY buttons in the modal menu) the blue border is always there.
:red_question_mark:

hmm, that’s not the case for me. If I remove your Text component, the first Button does not have the blue border when opening the modal. Which browser are you using?

I am using Safari, but have tested the website as well in Chrome, Firefox and Opera. Everywhere the same.
I have removed the Text component as well, - no difference in none of the browser.

I switched the top “Mahall” text for a button, and the highlight no longer appears… Can you try doing that?

Here’s the result – not a success…

Can you check that keyboard navigation is off on your system (off is the default)…

Yes, it’s turned off.

Hi @6harps

I’ve fixed the issue in the following project, could you please test it and let me know if it works for you? :slight_smile:

elementsapp://downloadDocument/rTqlOTxd2snL