Where can I use the -Webkit-Details-Marker?

Asked

Viewed 226 times

2

Wanted to remove the default arrow from the tag details/summary in HTML and found this solution to use the -webkit-details-marker. I wanted to know what she really does, because I didn’t find any explanatory tutorial on the net, I just thought to put this pseudo-element and it would work. It worked, but I’d like more information about her.

html css html5 css3

1 answer

1


According to the Specification WHATWG HTML5:

The Details element represents a Disclosure widget from which the user can obtain Additional information or Controls.

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

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

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

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

To better understand, read the full article here.

Browser other questions tagged html css html5 css3

You are not signed in. Login or sign up in order to post.