Where can I use the -webkit-details-marker?

Question

Where can I use the -webkit-details-marker?

Navigation

#1 by (1 votes)

2

I was looking to remove the default arrow from the details/summary tag in HTML and found this solution to use -webkit-details-marker . I wanted to know what it actually does, because I did not find any explanatory tutorial on the net, I just found it saying to put this pseudo-element and it would work. It worked, but I would like more information about it.

html html5 css css3

asked by anonymous 20.09.2016 / 21:45

1 answer

Validating a field of type input in function of a select Remove creation of serial column EntityFramework + Npgsql

score 1 · Accepted Answer

According to WHATWG HTML5 Specification :

The details element represents a disclosure widget from which the user can obtain additional information or controls.

The details element is intended to create a widget that is intended to provide you with additional information about a content or to reveal a form control. In this context, two elements are relevant, <details> , which is the container for all content to show / hide and <summary> , which contains the summary and the title of the section, being it optional, because if not is used, the browser will render a default text for the element.

With <details> , you can change the visibility of comments in a blog, user profiles, download details, complex forms, or web applications as shown in the following example in the specifications:

To style the widget in enginesWebKit you can use the pseudo class CSS ::-webkit-details-marker .

details summary::-webkit-details-marker {
  background: red;
  color: #fff;
  font-size: 500%;
}

For you to understand better, read the full article here .