¿Cómo se puede ocultar la flecha que se muestra de forma predeterminada en el elemento HTML5 <details> en Chrome?

Question

Ahora todavía es temprano, pero también sé que ustedes están al tanto.

Quiero usar el 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> 

Al escribir estas líneas, Chrome 12 beta es el único navegador para dar realmente la funcionalidad detalles elemento (click en resumen alterna el contenido de datos). Entonces, para responder a la siguiente pregunta, probablemente querrás usar ese navegador.

¿Sabes cómo se puede ocultar la flecha que se muestra de forma predeterminada en un elemento de detalles en Chrome?

Es un poco como el estilo predeterminado de <input type="search" /> en Webkit (consulte http://css-tricks.com/webkit-html5-search-inputs/). Puedes cambiarlo pero no es tan obvio.

EDITAR

intentado el siguiente código CSS sin éxito:

details, 
details summary { 
padding-left:0; 
background-image:none; 
-webkit-appearance:none; 
} 

Probablemente es la oportunidad que tendremos que apuntar con un poco de pseudo selector extraño como details::-webkit-details-disclosure-widget o actualmente no hay manera para cambiar las cosas en absoluto.

Además encontré esto en the specification:

Se espera que el primer recipiente a contienen al menos un cuadro de línea, y se espera que casilla de línea para contener un widget divulgación (típicamente un triángulo ) , posicionado horizontalmente dentro del relleno izquierdo del elemento detalles . Se espera que el widget permita al usuario solicitar que los detalles se muestren u oculten.

Answer 1

No planeé responder a mi propia pregunta, pero tengo la solución.

• Fuente: http://trac.webkit.org/timeline?from=2011-04-15T16%3A33%3A41-0700&precision=second
• Más acerca de la recomendación para el widget divulgación:
  http://mail-archive.com/whatwg@lists.whatwg.org/msg26129.html

detalles Resumen :: - webkit-detalles-marcador { display: none; }

Tenga en cuenta que el widget de divulgación se seguirá mostrando si no proporciona un elemento de resumen, que está permitido por la especificación. Resumen

Answer 2

no estoy seguro de si esto va a funcionar, dado que mi equipo actual no se ejecutará Chrome y que no tienen acceso al ordenador que normalmente uso, pero trate de añadir esto a su archivo CSS:

details > summary:first-of-type { 
    list-style-type: none; 
} 

Dime si funciona, solo lo vi en una recomendación, no en una especificación oficial.

Answer 3

:: - webkit-detalles-marcador { font-size:0px }

✔

Answer 4

Me parece que esto funciona bastante bien.

:: - webkit-marker-details {display: none; }