Border on nestable accordion

How To
1

Hey there!

I cant figure out, how to disable the border around the title box of the nestable accordion.
I tried the follwing things: 0px border in the normal active option of the accordion, also in layout, :active, :focus and :hover state.

I also used this css:

.brxe-twmiag:focus,
.brxe-twmiag:focus-visible,
.brxe-twmiag:focus-within {
outline: none !important;
box-shadow: none !important;
border-color: transparent !important;
}

.brxe-twmiag .bricks-accordion-header:focus,
.brxe-twmiag .bricks-accordion-header:focus-visible,
.brxe-twmiag .bricks-accordion-header:focus-within,
.brxe-twmiag .bricks-accordion-toggle:focus,
.brxe-twmiag .bricks-accordion-toggle:focus-visible,
.brxe-twmiag .bricks-accordion-toggle:focus-within {
outline: none !important;
box-shadow: none !important;
border-color: transparent !important;
}

But nothing works.
There is even a bigger padding (~5px) while opening one of the accordions.

Am I blind and there is a simple solution which I cant see right now?

Thanks for any hint!

Screenshot 2025-09-06 174033
Screenshot 2025-09-06 1740331920×491 40.1 KB

2

I see no border around the title box of a nestable accordion by default.

I also do not see a class called .bricks-accordion-header.

I see a class called .accordion-title-wrapper.

3

True, thank you. But that does not change anything.
I have the same issue even on other websites… that drives me crazy.
The website is now online, if someone want to have a look on it: https://selfievideo.de/
Otherwise I do a workaround without this element.

4

I wonder where all of that button focus CSS is coming from?

Update: I see where it is coming from. https://wponetap.com/

image
image1920×969 125 KB

1 Like
5

OMG macksix thank you so much!!
I deactived it now and everythink works perfect!

Have a wonderful evening and may your sleeves never get wet while washing up :smiley:

1 Like