How can you hide the arrow that is displayed by default on the HTML5
element in Chrome?

Question

I now its still early but I also know you guys are on top of it.

I want to use the HTML5 details element:

<details>
    <summary>What's the HTML5 details element?</summary>
    <p>The details element represents a disclosure widget from which the user can obtain additional information or controls.</p>
</details>

As of this writing, Chrome 12 beta is the only browser to actually give the details element functionality (clicking on summary toggles the details content). So to answer the following question you'll probably want to use that browser.

Do you know how you can hide the arrow that is displayed by default on a details element in Chrome?

It's a bit like the default styling of <input type="search" /> in Webkit (see http://css-tricks.com/webkit-html5-search-inputs/). You can change it but it's not that obvious.

EDIT

Tried the following CSS code with no success:

details,
details summary {
padding-left:0;
background-image:none;
-webkit-appearance:none;
}

There probably is a chance we will need to target it with some weird pseudo selector like details::-webkit-details-disclosure-widget or there's currently no way to change things at all.

Furthermore I found this in the specification:

The first container is expected to contain at least one line box, and that line box is expected to contain a disclosure widget (typically a triangle), horizontally positioned within the left padding of the details element. That widget is expected to allow the user to request that the details be shown or hidden.

score 140 · Accepted Answer · edited Jun 05 '18 at 00:09

140

I didn't plan to answer my own question but I have the solution.

Source: http://trac.webkit.org/timeline?from=2011-04-15T16%3A33%3A41-0700&precision=second
More about the recommendation for the disclosure widget:
http://mail-archive.com/whatwg@lists.whatwg.org/msg26129.html

Code

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

Note that the disclosure widget will still be displayed if you don't provide a summary element, which is allowed by the spec.

edited Jun 05 '18 at 00:09

Soviut

88,194
49
192
260

answered Jun 01 '11 at 14:23

DADU

6,482
7
42
64

3

The only problem I see is that this won't work cross-browser once others start supporting `
`
– Ky - Apr 04 '13 at 00:41
When they do, they will probably add their own prefixed version, much like with the current way to style an input placeholder. – DADU Apr 07 '13 at 19:10
Had a wierd display issue involving the stupid triangle and chrome dev tools didn't show me the selector for this thing. Thanks! – w-- Apr 29 '16 at 23:57
12

This works for Chrome, but to support Firefox this is needed as well: http://stackoverflow.com/a/6195588/1293492 These 2 answers should be merged. – Tamás Bolvári Oct 26 '16 at 09:59
1

I respect that this answer was great at the time, but really by now we should have a nice cross-browser, standards-compliant solution here i.s.o webkit specific. – Stijn de Witt Jul 05 '17 at 22:46
Do either of these work in Safari? No Safari here to test with. – Victoria Mar 21 '19 at 22:31
This works with chrome but it doesn't work with firefox, you need to add ```summary {list-style: none;} ``` for it to work in firefox. – Ivan Feb 09 '21 at 10:01
7

Its worth noting that there is now a non-webkit prefixed selector for this element: ```:marker``` To acheive this you need ```::marker{ display:none; } summary{ list-style: none }``` – Anthony Cregan Mar 14 '21 at 06:14
1

If you still want the widget to take up space (e.g., if you want to align the text of several consecutive `details` elements, not all of which are expandable) then you should use `visibility:hidden` instead of `display:none`. – BallpointBen Mar 16 '21 at 18:11
You probably want to use selector `details > summary::marker` to match only the part you want to change. – Mikko Rantalainen Jun 24 '21 at 13:25
1

This doesnt work in chrome. I've used `font-size: 0px;` – GDY Apr 11 '22 at 10:21
I can confirm that on iOS **15.5** the `summary::-webkit-details-marker` is still needed for the triangle bullet thingy to be correctly selected and hidden. – Sam May 25 '22 at 10:20

score 103 · Answer 2 · answered Jun 18 '19 at 12:58

103

According to https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details#Customizing_the_disclosure_widget

You can achieve this with:

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

answered Jun 18 '19 at 12:58

thmsnhl

1,064
1
6
4

5

to me this is the most suitable answer b'se it worked for me on both firefox, safari and chrome – Ivan Feb 09 '21 at 09:58
2

Some are saying the webkit prefix is obsolete and you only need to use ::marker. I'm not finding that to be the case in iOS 15.4 so I'm including both. – Simon_Weaver Feb 22 '22 at 19:46
details > summary {list-style: none;} worked for all browsers to me – A. D'Alfonso Apr 05 '22 at 10:40
2

I can confirm that on iOS **15.5** the `summary::-webkit-details-marker` is still needed for the triangle bullet thingy to be correctly selected and hidden. – Sam May 25 '22 at 10:19
this should be accepted answer. Thanks buddy! – Mihir Jun 30 '23 at 03:29
@Sam is it still the case in 2023? – oldboy Jul 09 '23 at 03:43

eyecatchUp · Answer 3 · 2022-03-02T11:30:29.367

72

Revisiting in 2021, the ::-webkit-details-marker n̶o̶ ̶l̶o̶n̶g̶e̶r̶ works only for Safari. For all other bmodern browsers, you need to target the pseudo-element ::marker like so:

details > summary {
  list-style: none;
}

details > summary::marker, /* Latest Chrome, Edge, Firefox */ 
details > summary::-webkit-details-marker /* Safari */ {
  display: none;
}

Codepen

edited Mar 02 '22 at 11:30

answered Mar 26 '21 at 09:29

eyecatchUp

10,032
4
55
65

1

All the other answers doesnt work in 2021, please use this target instead guys. Thanks op. – Bowie Chang Apr 14 '21 at 05:17
@eyecatchup do you know how to prevent it from opening? I don't want to show what
is hiding.
– Luis Jul 08 '21 at 19:06
1

@Luis try
– KHAYRI R.R. WOULFE Jul 31 '21 at 19:01
This is wrong. On iOS 15.4 which is the latest version today I still needed to include the `webkit-details-marker` to hide it. – Simon_Weaver Feb 22 '22 at 19:47
1

@Simon_Weaver Well, OP asked for Chrome. But you're right. Confirmed with Safari on Mac OS. Updated the answer accordingly. – eyecatchUp Mar 02 '22 at 11:31
@eyecatchUp thanks for updating and sorry if I sounded a bit blunt with 'This is wrong.' – Simon_Weaver Mar 02 '22 at 19:30
I can confirm that on iOS **15.5** the `summary::-webkit-details-marker` is still needed for the triangle bullet thingy to be correctly selected and hidden. – Sam May 25 '22 at 10:19

score 28 · Answer 4 · edited Sep 05 '16 at 13:08

28

I'm not sure if this will work, given that my current computer will not run Chrome and I do not have access to the computer I normally use, but try adding this to your css file:

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

Do tell me if it works, I only saw it in a recommendation, not an official spec.

edited Sep 05 '16 at 13:08

Type-Style

1,791
1
16
35

answered Jun 01 '11 at 02:25

Rose Kunkel

3,102
2
27
53

11

This works for Firefox, but to support Chrome this is needed as well: http://stackoverflow.com/a/6202729/1293492 These 2 answers should be merged. – Tamás Bolvári Oct 26 '16 at 10:00

score 8 · Answer 5 · edited Mar 03 '21 at 19:33

8

I find this works well enough.

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

edited Mar 03 '21 at 19:33

shreyasm-dev

2,711
5
16
34

answered Jul 29 '15 at 15:45

Crystal

148
1
7

score 5 · Answer 6 · edited Mar 03 '21 at 19:33

5

summary::-webkit-details-marker {
  font-size:0px
}

edited Mar 03 '21 at 19:33

shreyasm-dev

2,711
5
16
34

answered Mar 01 '13 at 17:01

user2121943

79
1
1

score 5 · Answer 7 · answered Feb 26 '19 at 03:26

5

I am on Firefox 65.0.1 and can remove the arrow this way:

details > summary {display:block}

answered Feb 26 '19 at 03:26

Taufik Nurrohman

3,329
24
39

score 2 · Answer 8 · answered Jan 03 '22 at 17:29

2

Changing the display to 'block' will remove the arrow.

summary {
    display:block;
}

answered Jan 03 '22 at 17:29

James

21
1

This is the simplest solution in 2022., and it wokrs. – mrmut Jan 23 '22 at 17:51
1

Doesn't work for me on iOS. – Simon_Weaver Feb 22 '22 at 19:39
Doesn't work on Safari 15.5, works on Chrome for instance. `::-webkit-details-marker { display: none; }` shoudl remove the marker on Safari – stamat Jun 19 '22 at 19:18

Bujaq · Answer 9 · 2021-09-15T00:03:00.797

I see in my example that it's just a matter of overwriting a display fromlist-item to other. Hence nowadays we use that type the same way as we use flex, grid et c. - all these've got their referral attributes.

:)

My answer: Just run devtools and set custom value for attributes display and/or list-style-type,list-style.

details{
background:yellow;
border-radius: 4px;
cursor:pointer;
}

summary{
/* ANSWER BELOW*/
    list-style: none;
/* ANSWER ABOVE*/
    background:green;
    border:1px solid red;
}

<details>detail
<summary>summary</summary
</details>

score 1 · Answer 10 · answered Sep 26 '22 at 17:47

1

This solution worked for me, since the highest rated on did not work on Chrome for me. It's a variation of the original solution.

details summary {
list-style: none;

}

answered Sep 26 '22 at 17:47

Carlos

11
1

This does not work on Safari. – lukas.j Feb 22 '23 at 10:40

score 1 · Answer 11 · answered Jun 29 '23 at 19:39

1

A great solution working in React / NextJs is something like:

details summary::marker {
  content: '';
}

answered Jun 29 '23 at 19:39

TBR920

77
7

How can you hide the arrow that is displayed by default on the HTML5
element in Chrome?

11 Answers11

Linked

Related

How can you hide the arrow that is displayed by default on the HTML5 element in Chrome?

11 Answers11

Linked

Related

How can you hide the arrow that is displayed by default on the HTML5
element in Chrome?