Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 799
DADU Avatar asked Jun 01 '11 01:06

DADU


People also ask

What is details element in HTML?

The <details> HTML element creates a disclosure widget in which information is visible only when the widget is toggled into an "open" state. A summary or label must be provided using the <summary> element.

Can you style a details tag?

HTML DETAILS TAGS are included in the relatively new group of HTML5 elements. The details tag (or “element”) can be used on its own, or combined with the also new summary tag.

Which of the following defines a visible heading for details element?

The <summary> tag defines a visible heading for the <details> element. The heading can be clicked to view/hide the details.


2 Answers

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/[email protected]/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.

like image 105
DADU Avatar answered Sep 18 '22 09:09

DADU


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; }  
like image 24
thmsnhl Avatar answered Sep 17 '22 09:09

thmsnhl