CODEWITHSUNDEEP
htmlcssgoogle-chromehtml-tag-detailshtml-tag-summary
DADU
DADU

Reputation: 7048

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

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.

Upvotes: 151

Views: 121400

Answers (12)

eyecatchUp
eyecatchUp

Reputation: 10560

Revisiting in 2021, the ::-webkit-details-marker 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

Upvotes: 100

Carlos
Carlos

Reputation: 17

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;
}

Upvotes: 0

Md Nazrul Islam
Md Nazrul Islam

Reputation: 1

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

Upvotes: -4

TBR920
TBR920

Reputation: 125

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

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

Upvotes: 3

James
James

Reputation: 21

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

summary {
    display:block;
}

Upvotes: 2

Bujaq
Bujaq

Reputation: 80

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>

Upvotes: 2

user2121943
user2121943

Reputation: 79

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

Upvotes: 5

Crystal
Crystal

Reputation: 148

I find this works well enough.

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

Upvotes: 8

thmsnhl
thmsnhl

Reputation: 1374

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;
}

Upvotes: 134

Taufik Nurrohman
Taufik Nurrohman

Reputation: 3409

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

details > summary {display:block}

Upvotes: 5

DADU
DADU

Reputation: 7048

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

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.

Upvotes: 160

Rose Kunkel
Rose Kunkel

Reputation: 3268

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.

Upvotes: 30

Related Questions