Accordion text and icon highlighted when clicked in browser

Beaver Builder
1

Hi, i am using the Accordion layout and notice that when I click the bar to open, an outline appears around the text box. Likewise when click the + icon, an outline appears around the icon. it does not disappear until I click off the accordion bar.

Is there a way to get rid of this “highlight”?

Thanks,
Gil

1 Like
2

I’ve been trying to remove the outline as well and haven’t had any luck so far

3

Its your browser’s default focus colour, its added for accessibility.

1 Like
4

Thanks for the reply. I don’t see it happen on some other drop downs, so I thought this highlighting could be removed or not activated.

5

Hi, I found a solution by adding some CSS for the Accordion

.fl-accordion .fl-accordion-button-label {
outline: none;
}
.fl-accordion .fl-accordion-button-icon {
outline: none;
}

2 Likes
6

Hi, I found a solution by adding some CSS for the Accordion

.fl-accordion .fl-accordion-button-label {
outline: none;
}
.fl-accordion .fl-accordion-button-icon {
outline: none;
}

3 Likes
7

Works like a charm. Thank you so much!

8

Where do i paste this code? I’ve tried pasting it in the CSS of the accordeon and in the CSS of the theme, but it has no effect.

9

Hi,
I pasted it in the Layout CSS/Javascript from the Tools Dropdown from the upper left corner of the page or in the CSS window in the Accordion module’s Advanced tab.

I hope this helps!

10

Please post back here because i am doing the sae but its not working.

11

I’m not sure why it’s not working for you. Last time I used it is on BB 2.8.3.3, Wordpress 6.3.5.

I have not updated the plug-ins yet, so not sure if they would work on later versons.

12

Here is the [link] to y wordpress website . Please figure out the issue if you can.

13

Link removed for 2 reasons:

  1. There is no accordian on that page
  2. That is not a Beaver Builder site
14

Let me talk with the develpor