How can I override the browser-generated triangle icon in a
element?

Question

I'd like to change the icon with CSS for this snippet of HTML5:

<details>
  <summary>Hello</summary>
  <p>The details</p>
</details>

Any clues?

What browser are you using? On my Firefox 6 I don't see an icon — Francesco Belladonna, Sep 18 '11 at 13:18

score 2 · Answer 1 · answered Jan 01 '12 at 23:10

2

On WebKit browsers you could do:

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

summary:before {content: ""}
details[open] summary:before {content: ""}

answered Jan 01 '12 at 23:10

Knu

[Seems like](http://jsfiddle.net/m47yd/1/) only the first line is necessary, at least in Chrome 16. That's the only browser I see the generated content in, however. I've never even heard of this element until just now though, so future browsers might need the rest :) EDIT: Oh right, to override the icon you need the psuedo element. – Wesley Murch Jan 01 '12 at 23:13

1 Answers1