0

In the questions

information was requested about the handling of the expand icon in HTML, the solution used was:

details>summary {
  list-style-type: none;
}

details > summary::-webkit-details-marker {
    display: none;
}

details>summary::before {
    content: "\25ba";
    padding-right:4px;
    font-size: 80%;
}

details[open]>summary::before {
    content: "\25bc";
    padding-right:4px;
    font-size: 80%;
}

thought this is not working in XHTML documents.

So the question is: how to set the icon in a XHTML document?

  • preferably in css but also js is possible
  • preferably with and without <summary> element
albert
  • 8,285
  • 3
  • 19
  • 32
  • Are these elements supported in xhtml? – evolutionxbox Oct 02 '22 at 07:35
  • Good question as far as I know it should work as the `
    element is working in Firefox, Chrome and Edge for the html version and the xhtml version though the xhtml version doesn't pick up the mentioned css settings.
     – albert Oct 02 '22 at 07:44
  • May you create a [mcve]? What kind of xhtml are you using? – evolutionxbox Oct 02 '22 at 10:34
  • 1
    I wilt try to create a MWE. – albert Oct 02 '22 at 11:09
  • Thanks for having me make a MWE, it looks like my, generated, code contains `

    The summary 3 The details

    ` and this should be `
    The summary 3

    The details

    ` It looks like a file with extension `.html` has no problems, but a file with extension `.xhtml` does. I have to investigate further...     – albert Oct 02 '22 at 17:12
  • `xhtml` is very restrictive. Browsers will try to render even invalid `html` on the other hand – Konrad Oct 02 '22 at 19:02

0 Answers0