addresses 36583: summary icon styles

files/en-us/web/html/element/details/index.md

@@ -21,7 +21,7 @@ You can use CSS to style the disclosure widget, and you can programmatically ope
 
 By default when closed, the widget is only tall enough to display the disclosure triangle and summary. When open, it expands to display the details contained within.
 
-Fully standards-compliant implementations automatically apply the CSS `{{cssxref("display")}}: list-item` to the {{HTMLElement("summary")}} element. You can use this to customize its appearance further. See [Customizing the disclosure widget](#customizing_the_disclosure_widget) for further details.
+Fully standards-compliant implementations automatically apply the CSS `{{cssxref("display")}}: list-item` to the {{HTMLElement("summary")}} element. You can use this or the {{cssxref("::marker")}} pseudo-element to [customize the disclosure widget](/en-US/docs/Web/HTML/Element/summary#styling_disclosure_widgets) for further details.
 
 ## Attributes
 
@@ -192,60 +192,7 @@ The selector `details[open]` can be used to style the element which is open.
 
 {{EmbedLiveSample("Customizing_the_appearance", 650, 150)}}
 
-### Customizing the disclosure widget
-
-The disclosure triangle itself can be customized, although this is not as broadly supported. There are variations in how browsers support this customization due to experimental implementations as the element was standardized, so we'll have to use multiple approaches for a while.
-
-The {{HTMLElement("summary")}} element supports the {{cssxref("list-style")}} shorthand property and its longhand properties, such as {{cssxref("list-style-type")}}, to change the disclosure triangle to whatever you choose (usually with {{cssxref("list-style-image")}}). For example, we can remove the disclosure widget icon by setting `list-style: none`.
-
-#### CSS
-
-```css
-details {
-  font:
-    16px "Open Sans",
-    Calibri,
-    sans-serif;
-  width: 620px;
-}
-
-details > summary {
-  padding: 2px 6px;
-  width: 15em;
-  background-color: #ddd;
-  border: none;
-  box-shadow: 3px 3px 4px black;
-  cursor: pointer;
-  list-style: none;
-}
-
-details > p {
-  border-radius: 0 0 10px 10px;
-  background-color: #ddd;
-  padding: 2px 6px;
-  margin: 0;
-  box-shadow: 3px 3px 4px black;
-}
-```
-
-This CSS creates a look similar to a tabbed interface, where activating the tab expands and opens it to reveal its contents.
-
-#### HTML
-
-```html
-<details>
-  <summary>System Requirements</summary>
-  <p>
-    Requires a computer running an operating system. The computer must have some
-    memory and ideally some kind of long-term storage. An input device as well
-    as some form of output device is recommended.
-  </p>
-</details>
-```
-
-#### Result
-
-{{EmbedLiveSample("Customizing_the_disclosure_widget", 650, 150)}}
+See the {{htmlelement("summary")}} page for an [example of customizing the disclosure widget](/en-US/docs/Web/HTML/Element/summary#styling_disclosure_widgets).
 
 ## Technical summary
 

files/en-us/web/html/element/summary/index.md

@@ -103,6 +103,81 @@ This example adds some semantics to the `<summary>` element to indicate the labe
 
 {{EmbedLiveSample("HTML_in_summaries", 650, 120)}}
 
+### Styling disclosure widgets
+
+The `<summary>` element's marker, the disclosure triangle, can be customized with CSS. The marker can be targeted using the {{cssxref("::marker")}} pseudo-element and element supports the {{cssxref("list-style")}} shorthand property and its longhand component properties, such as {{cssxref("list-style-type")}}. This enables changing the triangle to an image (usually with {{cssxref("list-style-image")}}) or a string (inlcuding emojis). In this example, we replace the content of one disclosure widget and remove the icon from another by setting `list-style: none`, anding a custom disclosure icon via generated content.
+
+#### CSS
+
+In the first disclosure widget, we style the `::marker`, changing the {{cssxref("content")}} based on the `<details>` element's `[open]` attribute. For the second widget, we remove the marker with `list-style` properties, then add styled generated content with the {{cssxref("::after")}} pseudo-element. We also include styles for `::-webkit-details-marker` to target Safari. The selector for the browser-specific pseudo element is included in an {{cssxref(":is()")}} pseudo class doesn't invalidate the selector list.
+
+```css
+details {
+  font-size: 1rem;
+  font-family: "Open Sans", Calibri, sans-serif;
+  border: solid;
+  padding: 2px 6px;
+  margin-bottom: 1em;
+}
+
+details:first-of-type summary::marker,
+:is(::-webkit-details-marker) {
+  content: "+ ";
+  font-family: monospace;
+  color: red;
+  font-weight: bold;
+}
+
+details[open]:first-of-type summary::marker {
+  content: "- ";
+}
+
+details:last-of-type summary {
+  list-style: none;
+  &::after {
+    content: "+";
+    color: white;
+    background-color: darkgreen;
+    border-radius: 1em;
+    font-weight: bold;
+    padding: 0 5px;
+    margin-inline-start: 5px;
+  }
+  [open] &::after {
+    content: "-";
+  }
+}
+details:last-of-type summary::-webkit-details-marker {
+  display: none;
+}
+```
+
+The CSS included [attribute selectors](/en-US/docs/Web/CSS/Attribute_selectors), the {{cssxref(":first-of-type")}} and {{cssxref(":last-of-type")}} pseudo-classes, the {{cssxref(":is()")}} pseudo-class qwhich takes a [forgiving selector list](/en-US/docs/Web/CSS/Selector_list#forgiving_selector_list), and CSS [nesting](/en-US/docs/Web/CSS/Nesting_selector).
+
+#### HTML
+
+```html
+<details>
+  <summary>Famous quote</summary>
+  <p>
+    <q>Nothing is impossible. The word itself says <q>I'm possible</q>.</q>
+    —Audrey Hepburn
+  </p>
+</details>
+
+<details>
+  <summary>Famous quote</summary>
+  <p>
+    <q>Your passion is waiting for your courage to catch up.</q> —Isabelle
+    Lafleche
+  </p>
+</details>
+```
+
+#### Result
+
+{{EmbedLiveSample("Styling disclosure widgets", 650, 150)}}
+
 ## Technical summary
 
 <table class="properties">