20 Simple Ways to Style the HTML details Element

In this article, we'll look at some simple ways to style the HTML <details> element, which is a very useful element for revealing and hiding bits of content on a web page.

It's handy to have a simple disclosure element in HTML that doesn't require JavaScript, but the default styling of the <details> element might be a turn-off for some. Fortunately, it's quite easy to change the styling of this element.

The table of contents below is an example of the <details> element in use. We've added a simple border to it, along with some padding.

Introducing the details Element

Here's the basic code for the <details> element:

<details>
  <summary>Click me!</summary>
  <p>Peekaboo! Here's some hidden content!</p>
</details>

Basically any HTML content can be placed inside the <details> element. The <summary> element provides the prompt for the user to click on the element to reveal more content, and it must be the first child of the <details> element.

Here's a live example of this code:

Let's look at all the ways we can use CSS to enhance the appearance of our <details> element.

Background Colors, Borders and Padding

A really simple way to enhance the look of the <details> element is to add some padding along with a border or some background colors.

Adding a border

As shown in the table of contents above, a simple border can do a lot to enhance and define the <details> element, along with some padding and a slight border radius:

details {
  padding: 10px; 
  border: 5px solid #f7f7f7;
  border-radius: 3px;
}

That's the simple code we've used above to style our ToC.

Adding some background color

Let's add a background color to our <details> element instead of a border:

details {
  padding: 10px;
  background-color: #e4eaef;
  border-radius: 5px;
}

The result is shown in the Pen below.

The background color gives the element better definition, and the padding helps to create some space inside it.

We can also give a different background color to the <summary> element to distinguish it from the rest of the content, and change its text color:

summary {
  background-color: #2196F3;
  color: white;
  padding: 10px;
}

Note that changing the text color of the <summary> element also changes the color of the marker arrow. That's because the marker is actually attached to the <summary> element just as markers (such as bullets) are attached to list items. We'll see below how to style them separately.

Styling the Marker

The default arrow (▶) that comes with the <summary> element is set to a display of list-item. So the arrow can be altered just like the default markers on HTML list items. We can change the character that's used, and independently change its color.

Changing the marker color

Let's set the default marker to a different color. Just for fun, let's also bump up the font size of the marker. We can do this with the ::marker pseudo-element:

summary::marker {
  color: #e162bf;
  font-size: 1.2em;
}

The result is shown below.

It's a nice, simple solution, although ::marker unfortunately isn't supported in Safari, so see other options below if that's a dealbreaker.

Changing the marker spacing

By default, the marker arrow is pretty close to the summary text. Its list-style-position is set to inside. If we change it to outside, we can add space between the summary text and the marker by adding some left padding. We also need to add some left margin so that the triangle doesn't hang outside the container:

summary {
  list-style-position: outside;
  margin-left: 30px;
  padding: 10px 10px 10px 20px;
  border-radius: 5px;
}

The result is shown below.

I've exaggerated the spacing between the arrow marker and the summary text just to make it obvious. Unfortunately, using list-style-position: outside; with the <summary> element doesn't work in Safari. Fortunately, there are other options, as we'll see below.

Changing the marker shape

The marker on our <summary> element doesn't have to be a triangle. We can replace it with any character we please:

summary {
  list-style-type: '⬇ ';
} 

Note that we've used '⬇ ' (with a space next to the arrow), which is an alternative to the spacing we tried above.

We now have a down arrow instead of a triangle. But … that down arrow won't change when the <details> element is open. That's because the <details> element has two states — closed and open — and we've only set the marker style for the closed state. So let's also set a marker for the open state:

details[open] > summary {
  list-style-type: '⬆ ';
}

This time, we've used an up-pointing arrow. This gives us the result shown below.

Damn! Once again, Safari lets us down, as it doesn't support list-style-type on the <summary> element either. Don't despair, though, as we'll look at fancier solutions below.

We can try all sorts of other characters, such as + and –, ✓ and Χ or ✗, ⋁ and ⋀ , and even have fun with other characters like ★ or colorful fruits like 🍏 🍌 🍓 🍋 and 🍐, but remember that these characters may not work on all systems, so be a little careful, and once again, list-style-type certainly won't work in Safari.

The post 20 Simple Ways to Style the HTML details Element appeared first on SitePoint.