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

css html google-chrome summary details
DADU picture DADU · Jun 1, 2011 · Viewed 38.8k times · Source

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.

Answer

DADU picture DADU · Jun 1, 2011

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.

Related questions

Hide scroll bar, but while still being able to scroll

I want to be able to scroll through the whole page, but without the scrollbar being shown. In Google Chrome it's: ::-webkit-scrollbar { display: none; } But Mozilla Firefox and Internet Explorer don't seem to work like that. I also tried this …

Read More
Resource interpreted as stylesheet but transferred with MIME type text/html (seems not related with web server)

I have this problem. Chrome continues to return this error Resource interpreted as stylesheet but transferred with MIME type text/html The files affected by this error are just the Style, chosen and jquery-gentleselect (other CSS files that are imported …

Read More
Firebug-like debugger for Google Chrome

Is there anything like Firebug that you can use within Google Chrome? Essential features I would like: Inspect HTML source (select elements, delete them, etc.) check CSS values (the built-in solution is weird, somehow)

Read More