title: How can you hide the arrow that is displayed by default on the HTML5 <details> element in Chrome?
body: <p>I now its still early but I also know you guys are on top of it.</p>
  <p>I want to use the <a href="http://www.w3.org/TR/html5/interactive-elements.html#the-details-element" rel="noreferrer">HTML5 details element</a>:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;details&gt;
      &lt;summary&gt;What's the HTML5 details element?&lt;/summary&gt;
      &lt;p&gt;The details element represents a disclosure widget from which the user can obtain additional information or controls.&lt;/p&gt;
  &lt;/details&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>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.</p>
  <p><strong>Do you know how you can hide the arrow that is displayed by default on a details element in Chrome?</strong></p>
  <p>It's a bit like the default styling of <code>&lt;input type=&quot;search&quot; /&gt;</code> in Webkit (see <a href="http://css-tricks.com/webkit-html5-search-inputs/" rel="noreferrer">http://css-tricks.com/webkit-html5-search-inputs/</a>). You can change it but it's not that obvious.</p>
  <p><strong>EDIT</strong></p>
  <p>Tried the following CSS code with no success:</p>
  <pre><code>details,
  details summary {
  padding-left:0;
  background-image:none;
  -webkit-appearance:none;
  }
  </code></pre>
  <p>There probably is a chance we will need to target it with some weird pseudo selector like <code>details::-webkit-details-disclosure-widget</code> or there's currently no way to change things at all.</p>
  <p>Furthermore I found this in <a href="http://dev.w3.org/html5/spec/Overview.html#the-details-element-0" rel="noreferrer">the specification</a>:</p>
  <blockquote>
  <p>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.</p>
  </blockquote>