Styling the <details> & <summary> Tags

In this section, we'll explore how to style the HTML <details> tag in combination with the <summary> tag using CSS.
We'll cover purely CSS-based techniques as well as ways to enhance your styles with JavaScript, including jQuery-powered animations.

Here's what we’ll cover, with examples:

  1. Styling the details marker (arrow)
  2. Creating a details accordion

Prerequisites

You should have a solid understanding of the HTML <details> and <summary> tags and know how to use them correctly before proceeding.

HTML <details> Tag
HTML <summary> Tag

When you render the HTML <details> tag in a browser, you'll see a marker (►) next to the summary. This marker is often referred to as an "icon".

It’s important to note that this arrow marker belongs to the <summary> tag, not the <details> tag itself.

Let's take a look at the following example:

HTML 
<details>
    <summary>Summary Text</summary>
    Additional details or content
</details>
Rendered Output Clicking on the "Summary Text" will show or hide the additional details.

In this example, the arrow marker can be customized or removed using CSS.

However, because the <summary> tag is still relatively new and its implementation is experimental in some browsers, different approaches are needed to ensure cross-browser support.

Removing the Details Marker

To remove the details marker from the browser display, you need to apply custom styles differently for:

  • Safari
  • Other browsers

Here's an example of CSS to remove the details marker:

HTML 
<details>
    <summary>Summary Text</summary>
    Additional details or content
</details>
CSS 
summary::-webkit-details-marker { /* Safari-specific style */
    display: none;
}
summary {
    list-style-type: none; /* Other browsers */
}

/* Both styles are required for cross-browser compatibility */
Rendered Output
  • In Safari, you can remove the marker using the non-standard CSS pseudo-element ::-webkit-details-marker.
  • In other browsers, the <summary> tag has a default display value of list-item. According to the HTML specification, this generates a marker via the ::marker pseudo-element. To remove it, set list-style-type: none; on the <summary> tag (or use the shorthand list-style: none;). Alternatively, changing the <summary> tag’s display value from list-item to another value (e.g., block, flex, or inline-block) will also remove the marker. The choice depends on which layout works best for your design.

Here's an example using display: block to remove the default marker:

CSS 
summary::-webkit-details-marker { /* Safari-specific style */
    display: none;
}
summary {
    display: block; /* Other browsers */
}

/* Both styles are required for cross-browser compatibility */
Rendered Output

In this example, setting display: block removes the default marker.
Other display values, such as flex or inline-block, will achieve the same effect. Choose the most efficient value for your layout.

Below is a summary of browser compatibility when changing the <summary> tag's display value from list-item.

Last updated: 2025-09-29

Browser Compatibility for <summary> with display: list-item
Tag & Property Value
Desktop Chrome
Chrome
DesktopDesktop Edge
Edge
Desktop Firefox
Firefox
Safari
Safari
<summary> 12 79 49 6
display: list-item 89 89 49 Not supported

See more details on caniuse.com.

Customizing the Details Marker

To customize the details marker, start by removing the default marker from the browser display. Then, use CSS pseudo-elements ::before or ::after to create and style a custom marker.

HTML 
<details>
    <summary>Summary Text</summary>
    Additional details or content
</details>
CSS 
summary::-webkit-details-marker { /* Safari-specific style */
    display: none;
}
summary {
    display: block; /* Other browsers */
}
/* Both styles are required for cross-browser compatibility */


/* From here, we start customizing the details marker */
summary {
    position: relative;
    padding-left: 1.2em;
    cursor: pointer;
}
summary::before {
    content: "";
    position: absolute;
    border-top: 0.5em solid transparent;
    border-bottom: 0.5em solid transparent;
    border-left: 0.75em solid yellowgreen;
    top: 0.2em;
    left: 0;
    transition: .25s transform;
}
details[open] summary::before {
    transform: rotateZ(90deg);
}
Rendered Output Click the "Summary Text" to see the custom marker in action.

Let's explore examples of styling an HTML <details> tag as an accordion using the <summary> tag.

  • Creating an accordion using only CSS
  • Creating an animated accordion using CSS and jQuery

Accordion Using Only CSS

HTML 
<details>
    <summary>Short announcement title</summary>
    <p>
        In 1989, the "World Wide Web" (WWW, W3) hypertext system was invented by Tim Berners-Lee.
        We simply call it the "web."
        It now holds a central place far beyond mere popularization in our daily lives.
    </p>
</details>
<details>
    <summary>Short announcement title</summary>
    <p>
        In 1989, the "World Wide Web" (WWW, W3) hypertext system was invented by Tim Berners-Lee.
        We simply call it the "web."
        It now holds a central place far beyond mere popularization in our daily lives.
    </p>
</details>
<details>
    <summary>Short announcement title</summary>
    <p>
        In 1989, the "World Wide Web" (WWW, W3) hypertext system was invented by Tim Berners-Lee.
        We simply call it the "web."
        It now holds a central place far beyond mere popularization in our daily lives.
    </p>
</details>
CSS 
details {
    padding: 0 2rem;
    background-color: #f1f9eb;
    border: 1px solid yellowgreen;
    border-radius: 0.5rem;
    margin-bottom: 1rem;
}
details:last-child {
    margin-bottom: 0;
}
summary::-webkit-details-marker {
    display: none;
}
summary {
    display: block;
    padding: 2rem 3rem 2rem 0;
    font-weight: 600;
    cursor: pointer;
    position: relative;
}
summary::before,
summary::after {
    content: "";
    position: absolute;
    width: 1rem;
    height: 2px;
    background-color: #222;
    right: 1rem;
    top: 2.5rem;
}
summary::after {
    transform: rotateZ(90deg);
}
details p {
    padding-bottom: 2rem;
}
details[open] summary::after {
    display: none;
}
Rendered Output

Animated Accordion Using CSS and jQuery

Note:
The following example is for demonstration purposes only. It is not fully accessible. Use it to understand styling and behavior concepts, not for production-level accessibility.

HTML 
<style>
    .demo-details-juqery-accordion {
        padding: 0 2rem;
        background-color: #f1f9eb;
        border: 1px solid yellowgreen;
        border-radius: 0.5rem;
        margin-bottom: 1rem;
    }
    .demo-details-juqery-accordion:last-child {
        margin-bottom: 0;
    }
    .demo-details-juqery-accordion summary::-webkit-details-marker {
        display: none;
    }
    .demo-details-juqery-accordion summary {
        display: block;
        padding: 2rem 3rem 2rem 0;
        font-weight: 600;
        cursor: pointer;
        position: relative;
    }
    .demo-details-juqery-accordion summary::before,
    .demo-details-juqery-accordion summary::after {
        content: "";
        position: absolute;
        width: 1rem;
        height: 2px;
        background-color: #222;
        right: 1rem;
        top: 2.5rem;
    }
    .demo-details-juqery-accordion summary::after {
        transform: rotateZ(90deg);
    }
    .demo-details-juqery-accordion p {
        padding-bottom: 2rem;
        display: none;
    }
    .demo-details-juqery-accordion[open] summary::after {
        display: none;
    }
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<details class="demo-details-jquery-accordion">
    <summary>Short announcement title</summary>
    <p>
        In 1989, the "World Wide Web" (WWW, W3) hypertext system was invented by Tim Berners-Lee.
        We simply call it the "web."
        It now holds a central place far beyond mere popularization in our daily lives.
    </p>
</details>
<details class="demo-details-jquery-accordion">
    <summary>Short announcement title</summary>
    <p>
        In 1989, the "World Wide Web" (WWW, W3) hypertext system was invented by Tim Berners-Lee.
        We simply call it the "web."
        It now holds a central place far beyond mere popularization in our daily lives.
    </p>
</details>
<details class="demo-details-jquery-accordion">
    <summary>Short announcement title</summary>
    <p>
        In 1989, the "World Wide Web" (WWW, W3) hypertext system was invented by Tim Berners-Lee.
        We simply call it the "web."
        It now holds a central place far beyond mere popularization in our daily lives.
    </p>
</details>
<script>
    const $_details = $(".demo-details-juqery-accordion");
    const $_summary = $_details.find("summary");

    $_summary.on("click", function(e) {
        e.preventDefault();

        const $_this = $(this);
        const $_this_details = $_this.parent("details");
        const $_this_details_p = $_this_details.find("p");
        const $_this_details_open = $_this_details.attr("open");

        if (! $_this_details_open) {
            $_this_details.prop("open", true);
            $_this_details_p.stop().slideDown(600);
        } else {
            $_this_details_p.stop().slideUp(300, function() {
                $_this_details.prop("open", false);
            });
        }
    });
</script>
Rendered Output

References

See also