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

ocultar elementos de una lista css

Question

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

Quiero usar el elemento de detalles HTML5 :

<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 momento de escribir esto, Chrome 12 beta es el único navegador que brinda la funcionalidad del elemento de detalles (al hacer clic en el resumen, se alterna el contenido detallado). Entonces, para responder a la siguiente pregunta, probablemente querrás usar ese navegador.

¿Sabes cómo puedes 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 (ver http://css-tricks.com/webkit-html5-search-inputs/ ). Puedes cambiarlo pero no es tan obvio.

EDITAR

Intenté el siguiente código CSS sin éxito:

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

Probablemente exista la posibilidad de que tengamos que apuntarlo con algún pseudo selector extraño como details::-webkit-details-disclosure-widget o no hay manera de cambiar las cosas en absoluto.

Además, encontré esto en la especificación :

Se espera que el primer contenedor contenga al menos un recuadro de línea, y se espera que el recuadro de línea contenga un artilugio de divulgación (típicamente un triángulo), posicionado horizontalmente dentro del margen izquierdo del elemento de detalles. Se espera que ese widget permita al usuario solicitar que los detalles se muestren u oculten.

Answer 1

Encuentro que esto funciona bastante bien.

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

Answer 2

No estoy seguro de si esto funcionará, dado que mi computadora actual no ejecutará Chrome y no tengo acceso a la computadora que normalmente uso, pero intente agregar 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

No tenía pensado responder 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 sobre la recomendación para el widget de divulgación:
  http://mail-archive.com/[email protected]/msg26129.html

Código

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

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

Answer 4

summary :: - webkit-marker-details { font-size:0px }

✔