20 maneras sencillas de dar estilo al elemento details de HTML – CodesCode
Aprende formas simples de estilizar el elemento HTML details, el cual es muy útil para mostrar y ocultar partes de contenido en una página web.
En este artículo, vamos a ver algunas formas simples de dar estilo al elemento HTML <details>, que es un elemento muy útil para revelar y ocultar contenido en una página web.
Es útil tener un elemento de divulgación simple en HTML que no requiera JavaScript, pero el estilo predeterminado del elemento <details> puede no ser atractivo para algunos. Afortunadamente, es bastante fácil cambiar el estilo de este elemento.
La tabla de contenidos a continuación es un ejemplo del uso del elemento <details>. Le hemos agregado un borde simple, junto con un poco de relleno.
- Presentando el elemento details
- Colores de fondo, bordes y relleno
- Estilizando el marcador
- Creando un marcador personalizado para el elemento summary
- Eliminar el marcador personalizado
- Usar una imagen de fondo como marcador
- Usar una imagen de fondo como marcador con ::after
- Hacer que el elemento summary se vea como una pestaña
- Limitar el ancho del elemento details
- Colocar la flecha del marcador al final del summary
- Usar ::after como marcador sin una imagen de fondo
- Extras diversos
- Efecto hover en el elemento details
- Animar la apertura y cierre del elemento details
- Cambiar el contenido del summary en los estados abierto y cerrado
- Cambiar el cursor del summary
- Cambiar los estilos de enfoque de accesibilidad
- Usar varios elementos details como una lista de acordeón
- Dar estilo a un encabezado dentro del summary
- Conclusión
Presentando el elemento details
Aquí está el código básico para el elemento <details>:
<details> <summary>¡Haz clic en mí!</summary> <p>¡Sorpresa! ¡Aquí hay contenido oculto!</p></details>Básicamente, cualquier contenido HTML se puede colocar dentro del elemento <details>. El elemento <summary> proporciona la pista para que el usuario haga clic en el elemento y revele más contenido, y debe ser el primer hijo del elemento <details>.
Aquí tienes un ejemplo en vivo de este código:
¡Sorpresa! ¡Aquí hay contenido oculto!
Veamos todas las formas en que podemos usar CSS para mejorar la apariencia de nuestro elemento <details>.
Colores de fondo, bordes y relleno
Una forma realmente sencilla de mejorar la apariencia del elemento <details> es agregar un poco de relleno junto con un borde o algunos colores de fondo.
Agregando un borde
Como se muestra en la tabla de contenidos anterior, un simple borde puede hacer mucho para mejorar y definir el elemento <details>, junto con un poco de relleno y un ligero radio de borde:
details { padding: 10px; border: 5px solid #f7f7f7; border-radius: 3px;}Ese es el código simple que hemos utilizado arriba para dar estilo a nuestra ToC.
Agregando algún color de fondo
Agreguemos un color de fondo a nuestro elemento <details> en lugar de un borde:
details { padding: 10px; background-color: #e4eaef; border-radius: 5px;}El resultado se muestra en la ventana siguiente.
Ver el Pen Estilizando el elemento details de HTML: agregando relleno y un color de fondo por CodesCode (@CodesCode) en CodePen.
El color de fondo le da al elemento una mejor definición y el relleno ayuda a crear un poco de espacio en su interior.
También podemos darle un color de fondo diferente al elemento <summary> para distinguirlo del resto del contenido y cambiar su color de texto:
summary { background-color: #2196F3; color: white; padding: 10px;}Ver el Pen Estilizando el elemento details de HTML: agregando un color de fondo al elemento summary por CodesCode (@CodesCode) en CodePen.
Tenga en cuenta que al cambiar el color del texto del elemento <summary> también cambia el color de la flecha del marcador. Esto se debe a que el marcador está realmente unido al elemento <summary> al igual que los marcadores (como los puntos) se unen a los elementos de la lista. Veremos a continuación cómo darles estilo por separado.
Estilizando el Marcador
El elemento <summary> se establece como display: list-item. Por lo tanto, la flecha predeterminada (▶) que lo acompaña se puede modificar al igual que los marcadores predeterminados de los elementos de lista de HTML. Podemos cambiar el carácter utilizado y cambiar su color de forma independiente.
Cambiando el color del marcador
Establezcamos el marcador predeterminado a un color diferente. Sólo por diversión, aumentemos también el tamaño de fuente del marcador. Podemos hacer esto con el pseudo-elemento ::marker:
summary::marker { color: #e162bf; font-size: 1.2em;}El resultado se muestra a continuación.
Ver el Pen Estilizando el elemento details de HTML: cambiando el color del marcador por CodesCode (@CodesCode) en CodePen.
Es una solución agradable y sencilla, aunque desafortunadamente ::marker no es compatible en Safari, así que vea otras opciones a continuación si eso es un obstáculo.
Cambiando el espaciado del marcador
De forma predeterminada, la flecha del marcador está bastante cerca del texto del resumen. Su propiedad list-style-position se establece en inside. Si lo cambiamos a outside, podemos agregar espacio entre el texto del resumen y el marcador agregando un poco de relleno izquierdo. También necesitamos agregar un poco de margen izquierdo para que el triángulo no se salga del contenedor:
summary { list-style-position: outside; margin-left: 30px; padding: 10px 10px 10px 20px; border-radius: 5px;}El resultado se muestra a continuación.
Ver el Pen Estilizando el elemento details de HTML: espaciado del marcador y texto del resumen por CodesCode (@CodesCode) en CodePen.
He exagerado el espaciado entre el marcador de flecha y el texto de resumen solo para que sea obvio. Desafortunadamente, usar list-style-position: outside; con el elemento <summary> no funciona en Safari. Afortunadamente, hay otras opciones, como veremos a continuación.
Cambiando la forma del marcador
El marcador en nuestro elemento <summary> no tiene que ser un triángulo. Podemos reemplazarlo con cualquier carácter que queramos:
summary { list-style-type: '⬇ ';} Nota que hemos usado '⬇ ' (con un espacio junto a la flecha), que es una alternativa al espaciado que intentamos arriba.
Ahora tenemos una flecha hacia abajo en lugar de un triángulo. Pero… esa flecha hacia abajo no cambiará cuando el elemento <details> esté abierto. Eso se debe a que el elemento <details> tiene dos estados: cerrado y abierto, y solo hemos configurado el estilo del marcador para el estado cerrado. Así que también establezcamos un marcador para el estado abierto:
details[open] > summary { list-style-type: '⬆ ';}Esta vez, hemos usado una flecha hacia arriba. Esto nos da el resultado mostrado a continuación.
Vea el Pen Estilizando el elemento HTML details: cambiando el marcador del resumen con list-style-type de CodesCode (@CodesCode) en CodePen.
¡Diablos! Una vez más, Safari nos decepciona, ya que tampoco es compatible con list-style-type en el elemento <summary>. ¡Pero no desesperes! Veremos soluciones más sofisticadas a continuación.
Podemos probar todo tipo de otros caracteres, como + y -, ✓ y Χ o ✗, ⋁ y ⋀, e incluso divertirnos con otros caracteres como ★ o frutas coloridas como 🍏 🍌 🍓 🍋 y 🍐, pero recuerda que estos caracteres pueden no funcionar en todos los sistemas, así que ten cuidado, y una vez más, list-style-type ciertamen
El resultado se muestra a continuación.
Ver el código Estilizando el elemento HTML details: una imagen de fondo en el resumen como marcador de CodesCode (@CodesCode) en CodePen.
El inconveniente de usar una imagen de fondo directamente en el elemento <summary> es que no podemos girarla cuando el elemento <details> está abierto, porque no se pueden establecer animaciones directamente en imágenes de fondo en CSS. (Por supuesto, podríamos usar una imagen diferente para el estado abierto, pero aún así no podríamos animarla, lo cual es mucho más divertido.) Así que si vamos a usar una imagen de fondo, es mejor colocarla en un elemento que se pueda girar y/o animar.
Usar una imagen de fondo como marcador con ::after
Coloquemos la imagen de fondo dentro de un pseudo-elemento ::after:
summary { display: flex;}summary::after { content: ''; width: 18px; height: 10px; background: url('arrow.svg'); background-size: cover; margin-left: .75em; transition: 0.2s;}details[open] > summary::after { transform: rotate(180deg);}Aquí tienes una demostración en vivo de este código.
Ver el código Estilizando el elemento HTML details: una imagen de fondo en summary::after como marcador de CodesCode (@CodesCode) en CodePen.
Hemos utilizado display: flex en el elemento <summary> para facilitar la posición de la flecha horizontalmente.
Lo bueno de esta configuración es que podemos agregar animación a la flecha. (La animación no parece funcionar en Safari, pero el comportamiento es lo suficientemente bueno, ¡y estoy empezando a cansarme de este navegador!)
Hacer que el elemento summary parezca una pestaña
Hemos estado configurando el elemento <summary> para que ocupe todo el ancho, pero no tiene por qué ser así. Podemos hacer que parezca más una pestaña con este cambio simple:
summary { display: inline-flex;}A continuación se muestra un ejemplo.
Ver el código Estilizando el elemento HTML details: el elemento summary mostrado como una pestaña de CodesCode (@CodesCode) en CodePen.
Limitar el ancho del elemento details
En todos nuestros ejemplos hasta ahora, el elemento <details> se ha estirado hasta todo el ancho de su contenedor, porque es un elemento de nivel de bloque. Sin embargo, podemos darle un ancho diferente, como width: 50%;. O podríamos establecerlo como una visualización en línea para que tenga el mismo ancho que su contenido:
details { display: inline-block;}Haz clic en la pestaña de abajo para revelar el ancho más estrecho del elemento <details>.
Ver el código Estilizando el elemento HTML details: el elemento details mostrado en línea de CodesCode (@CodesCode) en CodePen.
Intenta cambiar display: inline-block a width: 50% en el código de arriba.
Colocando la flecha del marcador al final del resumen
Hagamos algo un poco diferente ahora, colocando la flecha del marcador en el lado derecho del elemento <summary>. Debido a que hemos estado usando display: flex, mover la flecha todo el camino a la derecha es tan fácil como agregar justify-content: space-between al elemento <summary>:
summary { display: flex; justify-content: space-between;}Vea el Pen Estilizando el elemento HTML details: una imagen de fondo en summary::after como marcar, alineado a la derecha por CodesCode (@CodesCode) en CodePen.
Usando ::after como marcar sin una imagen de fondo
Hay otras formas en las que podemos usar ::after sin una imagen real. Aquí tienes un ejemplo que solo usa ::after con bordes:
summary::after { content: ''; width: 0; height: 0; border-top: 10px solid #15171b; border-inline: 7px solid transparent; transition: 0.2s;}Aquí tienes una demostración en vivo.
Vea el Pen Estilizando el elemento HTML details: marcador alineado a la derecha usando summary::after y bordes por CodesCode (@CodesCode) en CodePen.
Ahora tenemos una flecha que rota entre el estado cerrado y abierto. También hemos agregado una bonita sombra a <details>.
Otra forma de usar ::after sin una imagen es colocar caracteres Unicode dentro de la propiedad content:
summary::after { content: "\25BC"; transition: 0.2s;}Esto establece una forma triangular (▼) como nuestro marcador, como se muestra en esta demostración de CodePen.
Existen miles de símbolos Unicode, y es bastante divertido explorarlos. Cada uno viene con un código como U + 25BC o U + 025BC. Para usar ese código dentro de la propiedad content, toma los caracteres después del + y colócalos dentro de las comillas de content, con un \ al principio: content: "\25BC". Si hay uno o más ceros al inicio, puedes omitirlos. (Por ejemplo, U + 02248 puede convertirse en "\02248" o "\2248".)
Extras diversos
Hasta ahora, lo que hemos hecho es más que suficiente, pero hay otras cosas con las que podemos divertirnos, así que juguemos con algunas de ellas aquí.
Efecto de hover en el elemento details
Podemos establecer varios efectos de hover en el elemento <details>. Por ejemplo, podríamos hacer algo como esto:
details { transition: 0.2s background linear;}details:hover { background: #dad3b1;}Mientras estamos en ello, también hagamos una transición en el color del texto del <summary> en el estado open:
details > summary { transition: color 1s;}details[open] > summary { color: #d9103e;}El resultado se muestra a continuación.
Vea el Pen Estilizando el elemento HTML details: efectos de transición de fondo y texto por CodesCode (@CodesCode) en CodePen.
También podríamos simplemente cambiar el fondo del elemento <summary>.
Animando la apertura y cierre del elemento details
Jajaja, ¡te engañé! Parece que no es posible animar la apertura y cierre del elemento <details>. Según MDN:
Desafortunadamente, en este momento, no hay una forma incorporada de animar la transición entre abierto y cerrado.
Sin embargo, podemos divertirnos un poco animando el contenido del elemento <details>. Por ejemplo, podríamos configurar el contenido para que se desvanezca una vez revelado:
details article { opacity: 0;}details[open] article { animation: fadeIn .75s linear forwards;}@keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; }} A continuación se muestra el resultado.
Vea el Pen Estilizando el elemento HTML details: desvaneciendo el contenido del elemento details por CodesCode (@CodesCode) en CodePen.
Otro truco podría ser deslizar el contenido, así:
details { overflow: hidden;}details[open] article { animation: animateUp .5s linear forwards;}@keyframes animateUp { 0% { opacity: 0; transform: translatey(100%); } 100% { opacity: 1; transform: translatey(0); }}A continuación se muestra el resultado.
Vea el Pen Estilizando el elemento HTML details: deslizando el contenido del elemento details por CodesCode (@CodesCode) en CodePen.
Es un poco cursi y, tal vez, exagerado, pero vale la pena intentarlo de todos modos. Desafortunadamente, estas animaciones solo funcionan la primera vez que se hace clic en el elemento (a menos que las herramientas de desarrollo del navegador estén abiertas, por alguna razón extraña). Básicamente, necesitas la intervención de JavaScript para hacer que el efecto funcione repetidamente.
Cambiar el contenido del resumen en estados abierto y cerrado
En las demos anteriores, el <select> siempre ha tenido el mismo texto, ya sea que el elemento <details> esté abierto o cerrado. Pero podríamos cambiar eso. En primer lugar, dejemos el texto actual “Haz clic aquí” en su lugar, pero también agreguemos un texto adicional para cada estado usando el pseudo-elemento ::after:
summary::after { content: " para mostrar contenido oculto";}details[open] summary::after { content: " para ocultar contenido adicional";}Eso nos da el resultado mostrado a continuación.
Vea el Pen Estilizando el elemento HTML details: alternando el texto de selección por CodesCode (@CodesCode) en CodePen.
Cambiando el cursor del resumen
El cursor predeterminado (o puntero del mouse) para el elemento <details> es un poco extraño. Es una flecha estándar en su mayor parte, y un puntero de texto (o I-beam) cuando se pasa sobre el texto del <summary>.
Por diversión, cambiemos el cursor a una mano (o “puntero”):
summary { cursor: pointer;}Esto establece el puntero del mouse como una mano cuando se pasa el cursor en cualquier parte del elemento <summary>, como se muestra a continuación.
Vea el Pen Estilizando el elemento HTML details: cambiando el cursor del resumen a una mano (puntero) por CodesCode (@CodesCode) en CodePen.
También podríamos establecer el cursor en el elemento <details>, lo cual obligaría a que el cursor de mano se aplique en todo el elemento <details>. Sin embargo, prefiero mantenerlo solo en la parte en la que debemos hacer clic.
Cambiando los estilos de enfoque de accesibilidad
Si estamos navegando una página mediante el teclado, podemos usar la tecla Tab para llegar al elemento <details> y luego abrirlo presionando Enter. Durante el enfoque, el elemento <summary> tiene un contorno predeterminado. La imagen a continuación muestra cómo se ve esto en varios navegadores.
Son bastante similares: principalmente un contorno simple, oscuro (azul o negro), sólido, de aproximadamente 3px de ancho.
Existen muchos estilos que podríamos configurar para el elemento <details> enfocado, pero hagamos algo simple aquí como prueba de concepto, cambiando el contorno a una línea de puntos rojos:
summary:focus {outline: none;}summary:focus-visible {outline: 3px dotted #ff0060;}summary {padding: 10px;}De forma predeterminada, el contorno de enfoque no se muestra cuando hacemos clic en el elemento <summary>. Pero si cambiamos el estilo de enfoque, ese estilo se mostrará incluso para los usuarios que no utilizan el teclado (es decir, cuando hacemos clic en el elemento <details> con el ratón). Por lo tanto, en el código anterior, hemos establecido el valor none para el atributo outline y en su lugar hemos utilizado focus-visible para establecer los estilos, ya que esto significa que los estilos de enfoque solo serán visibles para los usuarios de teclado (para quienes es realmente útil).
La imagen a continuación muestra nuestro nuevo estilo.
Aquí tienes una demostración en vivo.
Mira el Pen Estilizando el elemento details de HTML: estilizando el contorno de enfoque por CodesCode (@CodesCode) en CodePen.
Podríamos divertirnos mucho con esto, utilizando animaciones, colores de fondo, etc., cuando el elemento <details> está enfocado. Te dejo que sigas experimentando.
Usando múltiples elementos details como una lista de acordeón
Existen propuestas para coordinar múltiples elementos details de tal manera que uno se cierre cuando otro se abre. La especificación de HTML incluso propone el atributo name compartido entre múltiples elementos <details> con este propósito.
Actualmente no hay forma de hacer esto solo con HTML y CSS, pero hay algunos ejemplos ingeniosos de cómo hacerlo con JavaScript (como aquí, aquí y aquí).
Lo mejor que podemos hacer con CSS es estilizar el elemento actualmente abierto de manera diferente a los demás, utilizando algunas de las técnicas que hemos cubierto anteriormente.
Aquí tienes un ejemplo sencillo:
details { background-color: #2196F3;}details[open] { background-color: #ce0e99;}Mira el Pen Estilizando el elemento details de HTML: trabajando con múltiples elementos details por CodesCode (@CodesCode) en CodePen.
Estilizando un encabezado dentro del resumen
Algunos desarrolladores, preocupados por la estructura de su HTML, les gusta colocar un elemento de encabezado dentro del elemento <summary>. Si eso es útil o no está sujeto a debate, pero la representación predeterminada no es agradable, con el encabezado situado en la línea debajo de la flecha. Esto se puede solucionar estableciendo la propiedad display: inline o display: inline-block en el encabezado:
summary h2 { display: inline;}Puedes ver una demostración de esto en CodePen.
Conclusión
Como hemos intentado mostrar anteriormente, hay muchas formas sencillas de estilizar el elemento <details>. Establecer bordes, rellenos y colores de fondo es fácil, y por sí mismos mejoran mucho la apariencia. Algunos de los métodos para estilizar el marcador predeterminado son muy útiles, pero dado que la compañía de frutas de Forrest () tiene tantos problemas con la estilización del marcador, puede ser mejor evitar esa opción y crear un elemento de marcador completamente personalizado. (Dicho esto, estilizar el marcador no afecta al elemento <details> en Safari.)
Ha habido intentos de animar la apertura y cierre del elemento <details> solo con CSS, pero son trucos en el mejor de los casos, así que no vale la pena intentar seguir ese camino. Si realmente quieres una apertura y cierre animados, necesitarás JavaScript.
Para aprender más sobre el elemento <details>, echa un vistazo a lo siguiente:
- la entrada de MDN sobre el elemento details
- la especificación de whatwg.org para el elemento details
Si se te ocurre alguna otra forma genial de estilizar el elemento <details>, házmelo saber en Twitter, ¡y podríamos destacarlas aquí!
Leave a Reply