Let’s look at some styling options for the details element that represents the expandable block.
open attribute
First of all, in the expanded state , the open attribute is added to the details element . Accordingly, using the attribute, you can set different styles for an element in a hidden and expanded state. For example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>easywptutorials.com</title>
<style>
details>summary {
padding: 5px;
background-color: #eee;
color: #333;
border: 1px #ccc solid;
cursor: pointer;
}
details>div {
border: 1px #ccc solid;
padding: 10px
}
details[open]>summary {
color: #eee;
background-color: #333;
}
</style>
</head>
<body>
<details>
<summary>Lorem ipsum dolor sit amet</summary>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel egestas sem. Donec varius ornare semper.
Nulla accumsan pulvinar justo vitae tincidunt. Morbi in aliquet ipsum. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Vivamus nec nisl non odio posuere lobortis. Fusce sit amet dolor volutpat,
ultrices urna sit amet, interdum orci. Quisque ac pellentesque arcu. Sed ullamcorper tristique risus a
consectetur.
</div>
</details>
</body>
</html>
With a selector details[open], we can refer to an element details in its expanded state. Accordingly selector
details[open] > summary {
color:#eee;
background-color:#333;
}
Allows you to set styles for the expanded summary element. That is, in this case, when expanding the details element, we switch the color of the style and background of the title.
Setting the marker
By default, the summary element uses the triangle symbol as a hidden/expanded marker. But it can also be customized.
You can use the list-style property to customize the marker image , as well as additional properties like list-style-type or list-style-image that are used to style lists . For example, if you need to remove this marker, you can apply the style list-style: none:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
details>summary {
padding: 5px;
background-color: #eee;
color: #333;
border: 1px #ccc solid;
cursor: pointer;
list-style: none;
}
details>div {
border: 1px #ccc solid;
padding: 10px;
}
details[open]>summary {
color: #eee;
background-color: #333;
}
</style>
</head>
<body>
<details>
<summary>Lorem ipsum dolor sit amet</summary>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel egestas sem. Donec varius ornare semper.
Nulla accumsan pulvinar justo vitae tincidunt. Morbi in aliquet ipsum. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Vivamus nec nisl non odio posuere lobortis. Fusce sit amet dolor volutpat,
ultrices urna sit amet, interdum orci. Quisque ac pellentesque arcu. Sed ullamcorper tristique risus a
consectetur.
</div>
</details>
</body>
</html>
Another example is applying a style list-style-type: disc;:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>METANIT.COM</title>
<style>
details>summary {
padding: 5px;
background-color: #eee;
color: #333;
border: 1px #ccc solid;
cursor: pointer;
}
details>div {
border: 1px #ccc solid;
padding: 10px;
}
details[open]>summary {
color: #eee;
background-color: #333;
}
</style>
</head>
<body>
<details>
<summary>Lorem ipsum dolor sit amet</summary>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel egestas sem. Donec varius ornare semper.
Nulla accumsan pulvinar justo vitae tincidunt. Morbi in aliquet ipsum. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Vivamus nec nisl non odio posuere lobortis. Fusce sit amet dolor volutpat,
ultrices urna sit amet, interdum orci. Quisque ac pellentesque arcu. Sed ullamcorper tristique risus a
consectetur.
</div>
</details>
</body>
</html>
Customizing with the content property
But of course list-style, we are not limited to the property and, at our discretion, we can control the title more finely, for example, using the content property :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>METANIT.COM</title>
<style>
details>summary {
padding: 5px;
background-color: #eee;
color: #333;
border: 1px #ccc solid;
cursor: pointer;
list-style: none;
}
details>div {
border: 1px #ccc solid;
padding: 10px;
}
details[open]>summary {
color: #eee;
background-color: #333;
}
summary:before {
content: "+";
font-size: 20px;
font-weight: bold;
margin: -5px 5px 0 0;
}
details[open] summary:before {
content: "-";
}
</style>
</head>
<body>
<details>
<summary>Lorem ipsum dolor sit amet</summary>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel egestas sem. Donec varius ornare semper.
Nulla accumsan pulvinar justo vitae tincidunt. Morbi in aliquet ipsum. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Vivamus nec nisl non odio posuere lobortis. Fusce sit amet dolor volutpat,
ultrices urna sit amet, interdum orci. Quisque ac pellentesque arcu. Sed ullamcorper tristique risus a
consectetur.
</div>
</details>
</body>
</html>
In this case, using the selector , we summary:beforeset the content that will be placed before the main content of the element summary. The selector details[open] summary:beforeallows you to do the same, only expanded. As a result, the marker will display the + symbol when hidden, and the – symbol when expanded.