20 Simple Ways to Style the HTML details Element

details article {
  opacity: 0;
}

details[open] article {
  animation: fadeIn .75s linear forwards;
}

@keyframes fadeIn {
 0% {
   opacity: 0;
 }
 100% {
   opacity: 1;
 }
} 

The result is shown below.

Another trick might be to slide in the content, like so:

details {
  overflow: hidden;
}

details[open] article {
  animation: animateUp .5s linear forwards;
}

@keyframes animateUp {
  0% {
    opacity: 0;
    transform: translatey(100%);
  }
  100% {
    opacity: 1;
    transform: translatey(0);
  }
}

The result is shown below.

It’s a bit cheesy, and perhaps overkill, but worth trying anyway. Unfortunately, these animations only work the first time the element is clicked (unless the browser devtools are open, for some weird reason!). You basically need the intervention of JavaScript to make the effect work repeatedly.

Changing summary content in open and closed states

In the demos above, the has always had the same text, whether the

element is open or closed. But we could change that. Firstly, let’s leave the current “Click me” text in place, but also add some extra text for each state using the ::after pseudo-element:

summary::after {
  content: " to show hidden content";
}

details[open] summary::after {
  content: " to hide extra content";
}

That gives us the result shown below.

See the Pen
Styling the HTML details element: toggling the select text by SitePoint (@SitePoint)
on CodePen.

Changing the summary cursor

The default cursor (or mouse pointer) for the

element is kind of weird. It’s a standard arrow for the most part, and a text pointer (or I-beam) when hovering over the

text.

For fun, let’s change to the hand cursor (or “pointer”):

summary {
  cursor: pointer;
}

This sets the mouse pointer to a hand when hovering anywhere over the

element, as shown below.

See the Pen
Styling the HTML details element: Changing the summary cursor to a hand (pointer) by SitePoint (@SitePoint)
on CodePen.

We could set the cursor on the

element instead, which would force the hand cursor across the entire

element. I prefer to keep it just on the thing we’re meant to click, though.

Changing the accessibility focus styles

If we’re navigating a page via the keyboard, we can tab to the

element and then open it by hitting return. During focus, the

element has a default outline. The image below shows what this looks like in various browsers.

They’re much of a muchness: mostly a simple, dark (blue or black), solid outline that’s about 3px wide.

There are many styles we could set for the focused

element, but let’s do something simple here as proof of concept, changing the outline to a red dotted line:

summary:focus {outline: none;}
summary:focus-visible {outline: 3px dotted #ff0060;}
summary {padding: 10px;}

By default, the focus outline doesn’t display when we click on the

element. But if we change the focus style, that style does display even to non-keyboard users (that is, when we click on the

element with a mouse). So in the code above, we’ve set the outline to none and instead used focus-visible to set the styles, as this means the focus styles will only be visible to keyboard users (for whom it’s actually useful).

The image below shows our new styling.

Here’s a live demo.

See the Pen
Styling the HTML details element: styling the focus outline by SitePoint (@SitePoint)
on CodePen.

We could have a lot of fun with this, using animations, background colors and so on when the

element is in focus. I’ll leave it to you to experiment further.

Using multiple details elements like an accordion list

As of 2024, we can create an “exclusive accordion” effect in some browsers. That is, we can create an accordion with multiple details elements where one closes when another opens — by using the name attribute. We simply put the same name attribute on any element we want as part of the accordion — such as name="exclusive". (These related details elements can be anywhere on the page; they don’t have to be side by side!)

Here’s an example:

Exclusive accordions

I will be open when the page loads (because of the open attribute, but I’ll close when the next details element is clicked.




Click me instead!

When we open this details element, the one above it will close.

See the Pen Styling the HTML details element: exclusive accordion by SitePoint (@SitePoint)
on CodePen.

If older browser support is important, there are some nifty examples of doing it with JavaScript (such as here, here, here and here).

We could also use CSS to style the currently open element differently from the others, using some of the techniques we’ve covered above.

Here’s a simple example:

details {
  background-color: #2196F3;
}

details[open] {
  background-color: #ce0e99;
}

Styling a heading inside the summary

Some developers, concerned about the structure of their HTML, like to place a heading element inside the

element. Whether that’s useful or not is up for debate, but the default rendering is not nice, with the heading sitting on the line below the arrow. This can be fixed by setting the heading to display: inline or display: inline-block:

summary h2 {
  display: inline;
}

You can see check out a demo of this on CodePen.

Conclusion

As we’ve tried to show above, there are lots of simple ways to style the

element. Setting borders, padding and background colors is easy, and these in themselves improve the look greatly. Some of the methods for styling the default marker are very handy, but given that Forrest’s fruit company () has so many issues with styling the marker, it may be better to steer away from that option, in favor of creating a completely custom marker element. (That said, styling the marker doesn’t break the

element in Safari.)

There have been attempts to animate the opening and closing of the

element just with CSS, but they are hacky at best, so it’s not worth trying to go down that rabbit hole. If you really want animated opening and closing, you’ll need JavaScript.

To learn more about the

element, check out the following:

• the MDN entry on the details element
• the whatwg.org specification for the details element

If you come up with any other cool ways to style the

element, let me know on Twitter, and we might feature them here.

Close

Ralph Mason

Ralph is a freelance copyeditor, web designer and teacher at Page Affairs.

SitePoint Premium

Stay Relevant and Grow Your Career in Tech

• Premium Results
• Publish articles on SitePoint
• Daily curated jobs
• Learning Paths
• Discounts to dev tools

Start Free Trial

7 Day Free Trial. Cancel Anytime.

Stuff we do

PremiumNewslettersLearning pathsLibraryForums

Contact

Contact usFAQPublish your book with usWrite an article with usAdvertise

About

Our storyCorporate membershipsStart free trialLogin

Connect

RSSFacebookInstagramTwitter (X)

Subscribe to our newsletter

Get the freshest news and resources for developers, designers and digital creators in your inbox each week