CODEWITHSUNDEEP
htmlcss
acropose-corentin
acropose-corentin

Reputation: 3

How to remove bullet from details element?

I'm wanting to remove the little arrow that appears on the left of <details> element, but I don't find how to..

Can anyone tell me how to do this ?

Thanks

(btw I'm sure that it's makeable easily by editing css styling)

Upvotes: 0

Views: 2060

Answers (1)

user12643166
user12643166

Reputation:

The MDN's details element article says:

The <summary> element supports the list-style shorthand property and its longhand properties, such as list-style-type, to change the disclosure triangle to whatever you choose (usually with list-style-image). For example, we can remove the disclosure widget icon by setting list-style: none.

Chrome doesn't support this yet, however, so we also need to use its non-standard ::-webkit-details-marker pseudo-element to customize the appearance in that browser.

Therefore, use list-style-type property and ::-webkit-details-marker pseudo element.

summary {
  list-style-type: none; /* Firefox */
}

summary::-webkit-details-marker {
  display: none; /* Chrome */
}
<details>
  <summary>Summary</summary>
  <p>text text text text text text text text text text text text text text text text text text text.</p>
</details>

Upvotes: 5

Related Questions