Remove default border in -amp-accordion-header

Question

Not all bloggers like the default CSS value presented by AMP and I'm sure that AMPProject has handled all kinds of possibility for that. Therefore, I need to remove the default border (#DFDFDF) in .-amp-accordion-header and change the background (#EFEFEF) into transparent and I get failed.

Here's its default html:

<div class="-amp-accordion-header" role="tab"
aria-controls="_AMP_content_0" aria-expanded="false">

As you know that we can't add -amp-accordion-header in our custom CSS element that makes it invalid AMP or not-validated!

in: https://github.com/ampproject/amphtml/pull/1849/files, you'll see:

.-amp-accordion-header {
cursor: pointer;
background-color: #efefef;
padding-right: 20px;
border: solid 1px #dfdfdf;
}

Please help me whoever knows.pls.thnks.

Answer 1

Perhaps this is tricky but then this solves and works using nested-accordion class selector:

CUSTOM-CSS:

.nested-accordion{
background:transparent;
border:1px solid #fff;
}

HTML:

<amp-accordion>
    <section>
      <h4 class='nested-accordion'>
          <span class='show-more'>MORE &#8595;</span>
          <span class='show-less'>LESS &#8593;</span>
      </h4>
      ..................
    </section>
</amp-accordion>