<div class="page">
    <header>
      <h1>Styling disclosure widgets</h1>
    </header>
    <main>
      <details>
        <summary>
          <h2>How can I add some (very) basic styles?</h2>
        </summary>
        <div>
          <p>For starters, you might like to add a background color to your summary element, and then a border of the same color around the entirety of everything else. This ties the contents together, visually.</p>
          <p>In order to get a border around the entirety of your non-summary content, put it all in a div (or some other containing element you deem appropriate):</p>
          
<pre><code>&lt;details&gt;
  &lt;summary&gt;
    &lt;h3&gt;Here is your summary content&lt;/h3&gt;
  &lt;/summary&gt;
  &lt;div&gt;
    &lt;p&gt;We've put all our other content in a containing div.&lt;/p&gt;
    &lt;p&gt;This way, we can put a border around (or otherwise style) this container.&lt;/p&gt;
  &lt;/div&gt;
&lt;/details&gt;</code></pre>
          
        </div>
      </details>
    </main>
  </div>
*,
*:before,
*:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: system-ui, "Segoe UI", Roboto, sans-serif;
  height: 100vh;
  margin: 0 auto;
  max-width: 60rem;
  padding: 0 .5rem;
}

header, main {
  margin: 1rem 0;
}

main *+* {
  margin-top: 1rem;
}

/* Styling the Disclosure Widgets */

details > summary {
  background-color: #fdb;
  cursor: pointer;
  padding: .5rem 1rem;
}

details > summary > * {
  display: inline;
}

details > div {
  border: 2px solid #fdb;
  margin-top: 0;
  padding: 1rem;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.