acerca de HTML

Referencia de etiquetas

Etiqueta selectedcontent en HTML: selección personalizable

La etiqueta <selectedcontent> en HTML refleja el contenido de la <option> seleccionada dentro del botón inicial de un <select> personalizable. Sirve para presentar la elección con texto e iconos, y darles estilos sin programar un selector desde cero. Úsala como mejora de un desplegable de selección simple, conservando una etiqueta visible, opciones comprensibles y valores útiles cuando la personalización no esté disponible.

<label for="curso">Curso</label>
<select id="curso" name="curso">
  <button><selectedcontent></selectedcontent></button>
  <option value="html">HTML básico</option>
  <option value="css">CSS básico</option>
</select>

Resultado: puedes elegir HTML básico o CSS básico. Este fragmento identifica dónde se coloca <selectedcontent>; por sí solo no activa la apariencia personalizable. El reflejo visible depende del soporte del navegador y del CSS del ejemplo completo de abajo. El dato sigue siendo html o css, bajo el nombre curso, si asocias el selector con un formulario. Aquí no hay envío.

Para probarlo, sustituye el formulario del documento completo por este fragmento y retira su bloque <style>. Después añade appearance: base-select al selector y a su ::picker(select) en un navegador compatible, como se explica más adelante.

Sintaxis y contexto válido

Escribe <selectedcontent></selectedcontent> vacío en el código de autoría. Ambas etiquetas son necesarias: el cierre no es omisible y /> no lo sustituye en HTML. El navegador inserta el contenido reflejado; no escribas dentro un texto inicial como «Elige un curso».

Colócalo dentro de un <button> que sea el primer hijo elemento de <select>, antes de las opciones. Puede ser descendiente del botón; el ejemplo usa la estructura directa más sencilla, con un solo <selectedcontent>. No lo sitúes como hermano del botón, fuera del selector ni dentro de una opción. Consulta el modelo normativo de selectedcontent.

Este artículo trabaja con un desplegable simple: no añade multiple ni un size que lo convierta en una lista visible. No extiendas su algoritmo de reflejo a una selección múltiple. Para varias respuestas, consulta las opciones de <select>.

Qué refleja: contenido, label y value

La representación elegida y el dato del formulario cumplen funciones distintas. Supón esta opción:

<option value="html" label="Curso HTML">HTML básico</option>

El contenido que se copia a <selectedcontent> es «HTML básico». El atributo label de <option> puede proporcionar su rótulo, pero no se refleja en <selectedcontent>. El atributo value aporta html, el dato de esa opción. Por eso conviene mantener coherentes el texto y el rótulo; el ejemplo práctico prescinde de label para evitar dos presentaciones diferentes. La referencia de MDN sobre selectedcontent explica la representación clonada.

La copia puede incluir elementos de presentación admitidos en la opción, como los <span> del ejemplo. No mueve los nodos originales: las opciones siguen en el desplegable. Al cambiar la elección, el navegador sustituye la copia por el contenido de la nueva opción. Tampoco supongas que cualquier cambio dinámico del contenido se reflejará inmediatamente; comprueba ese caso en el navegador y en el framework que uses.

Evita id dentro del contenido que se copia, porque la copia puede duplicarlo. Tampoco introduzcas enlaces, botones, campos o descendientes con tabindex para crear controles dentro de las opciones. La clonación no conserva los listeners registrados con addEventListener(); consulta las limitaciones de cloneNode. Este caso usa solo contenido estático.

Ejemplo práctico: elegir un taller con un icono decorativo

Guarda lo siguiente en talleres.html, con codificación UTF-8, y ábrelo en el navegador. Contiene todo el HTML y CSS necesario; no requiere imágenes, JavaScript ni un servidor. El formulario permite preparar una elección local: no incluye un botón de envío ni guarda datos.

<!doctype html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Elegir un taller</title>
  <style>
    body {
      margin: 0;
      padding: 1.5rem;
      font: 1rem/1.5 system-ui, sans-serif;
      color: #162b45;
      background: #f7fafc;
    }

    .inscripcion { max-inline-size: 24rem; }
    .inscripcion label { display: block; font-weight: 700; }
    .inscripcion select {
      box-sizing: border-box;
      inline-size: 100%;
      padding: 0.65rem;
      font: inherit;
    }
    .inscripcion select:focus-visible {
      outline: 3px solid #155fc1;
      outline-offset: 3px;
    }

    @supports (appearance: base-select) and selector(::picker(select)) {
      .inscripcion select {
        appearance: base-select;
        padding: 0;
        border: 1px solid #61748a;
        border-radius: 0.5rem;
        background: white;
        color: #162b45;
      }
      .inscripcion select::picker(select) {
        appearance: base-select;
        border: 1px solid #61748a;
        border-radius: 0.5rem;
        background: white;
        color: #162b45;
      }
      .inscripcion select > button {
        padding: 0.65rem;
        font: inherit;
        color: inherit;
      }
      .inscripcion selectedcontent,
      .inscripcion option {
        display: flex;
        align-items: center;
        gap: 0.75rem;
      }
      .inscripcion selectedcontent { padding: 0.65rem; }
      .inscripcion option { padding: 0.65rem; }
      .inscripcion .icono {
        inline-size: 0.8rem;
        block-size: 0.8rem;
        flex: none;
        border: 1px solid currentColor;
        border-radius: 50%;
        background: #d3e8ff;
      }
    }
  </style>
</head>
<body>
  <h1>Elige tu próximo taller</h1>
  <form class="inscripcion" id="inscripcion">
    <label for="taller">Taller</label>
    <select id="taller" name="taller" aria-describedby="ayuda-taller">
      <button><selectedcontent></selectedcontent></button>
      <option value="html" selected>
        <span class="icono" aria-hidden="true"></span>
        <span>Taller de HTML</span>
      </option>
      <option value="css">
        <span class="icono" aria-hidden="true"></span>
        <span>Taller de CSS</span>
      </option>
    </select>
    <p id="ayuda-taller">Elige un taller. Esta muestra no envía datos.</p>
  </form>
</body>
</html>

Resultado en un navegador compatible: el control cerrado muestra Taller de HTML y un círculo decorativo. Al elegir Taller de CSS, cambia el texto reflejado; el círculo conserva su estilo. Los nombres identifican las opciones aunque no se vea el icono. En un navegador sin soporte, debe quedar un selector tradicional con esos dos textos y los mismos valores; no se exige que muestre los círculos.

Prueba la interacción paso a paso:

  1. Pulsa Tab hasta llegar a Taller y comprueba el indicador de foco.
  2. En el patrón personalizable probado, pulsa Espacio para abrir, Flecha abajo para llegar a Taller de CSS y Enter para confirmar. Esc debe permitir cerrar sin quedar atrapado. En Firefox, con el control tradicional cerrado, Inicio lleva a la primera opción y Flecha abajo cambia a la segunda; Enter confirma. La apertura del desplegable tradicional puede usar otra secuencia según el navegador y el sistema.
  3. Comprueba que la elección y su texto cambian. Con la consola, opcionalmente, consulta document.getElementById('taller').value: debe devolver css. new FormData(document.getElementById('inscripcion')).get('taller') también debe devolver css; estas consultas inspeccionan datos locales y no los envían.
  4. Desactiva JavaScript y repite la elección. El ejemplo no depende de scripts. Después retira el CSS para provocar la apariencia tradicional y prueba también en un navegador sin soporte.

Activación con CSS y mejora progresiva

La propiedad CSS appearance con valor base-select activa la presentación personalizable. Se aplica al <select> y al pseudo-elemento ::picker(select), que representa el desplegable, según la definición de base-select en CSS UI. El ejemplo separa ambas reglas dentro de @supports; los navegadores que no cumplen las dos consultas conservan sus estilos tradicionales. Consulta el patrón de selectores personalizables de MDN.

Puedes dar a la copia un estilo diferente del de las opciones con .inscripcion selectedcontent .icono. Por ejemplo, añade display: none a ese selector: desaparece el círculo del botón, pero continúa en las opciones del desplegable compatible.

Cambiar el texto de una opción y volver a elegirla debe reflejar el nuevo contenido, sin cambiar su value. Si retiras solo <selectedcontent> del botón explícito, pierdes el lugar donde se actualiza esa presentación. Retirar el botón completo permite usar la representación implícita del navegador compatible; dejas de tener un <selectedcontent> propio al que aplicar esos estilos. Ninguna de estas modificaciones define un nuevo dato de formulario.

Atributos y accesibilidad

<selectedcontent> no tiene atributos específicos. Admite los globales, como class o lang, sin que estos activen la clonación. selected pertenece a <option>; name, a <select>; appearance: base-select es CSS, y .value es una propiedad DOM del selector. El estado interno llamado disabled en el algoritmo de <selectedcontent> no es un atributo público para configurarlo. Para deshabilitar el control, usa disabled en <select>.

La etiqueta visible «Taller» da nombre al selector mediante for e id; el texto de la opción comunica la elección. El icono vacío tiene aria-hidden="true" y es decorativo: no comunica una diferencia necesaria. El botón inicial y su contenido son inertes dentro de este patrón, por lo que no ofrecen focos independientes. La interacción corresponde al selector. No añadas roles de menú ni un aria-label que sustituya innecesariamente el nombre visible. MDN documenta <selectedcontent> sin un rol ARIA implícito propio.

La revisión del árbol accesible y del teclado ayuda a detectar problemas de nombres, opciones y foco, pero no garantiza un anuncio idéntico con todos los lectores de pantalla. Comprueba la combinación real de navegador y tecnología de apoyo que use tu público.

Compatibilidad del conjunto

Revisión del 3 de octubre de 2026: los datos de MDN registran <selectedcontent> y ::picker(select) desde Chrome 135 y Safari 27, y no los registran como disponibles en Firefox. base-select tiene datos propios: en Firefox aparece una implementación condicionada a preferencias experimentales. Estas piezas no equivalen entre sí; revisa los datos de selectedcontent, appearance y picker. Chrome explica su incorporación desde 135 en su presentación del select personalizable.

Los ejemplos se comprobaron en Chromium 153 y Firefox 155 con la configuración de pruebas sin activar preferencias de personalización, a 375 y 1280 píxeles de ancho, con y sin JavaScript. Chromium mostró la copia enriquecida y Firefox conservó la selección tradicional. La lectura de la guía se comprobó también en esos tamaños. Esta prueba local no verifica Safari ni los anuncios de un lector de pantalla.

Al evaluar otro entorno, separa cuatro comprobaciones: reconocimiento del elemento, aceptación del CSS, conservación de la estructura al analizar HTML y funcionamiento accesible del control. @supports comprueba CSS, no todas las demás condiciones. Un parser antiguo puede descartar el botón o los <span> dentro de <select>; la alternativa sigue siendo útil porque las opciones conservan texto y valores. Si usas renderizado de servidor o hidratación, inspecciona además el DOM resultante y los errores del framework.

Errores frecuentes y preguntas

¿Selectedcontent cambia el valor enviado? No. En el ejemplo, elegir Taller de CSS conserva taller=css, aunque ocultes el icono reflejado o cambies su estilo. La presentación no sustituye el contrato de datos del <select>.

¿Puedo usarlo sin comprobar compatibilidad? Conserva un selector funcional y comprueba los navegadores objetivo. El soporte del <select> tradicional no demuestra el soporte de la personalización.

¿Por qué no aparece el contenido elegido? Revisa en este orden: que el botón sea el primer hijo elemento, que <selectedcontent> esté vacío en la autoría y dentro de ese botón, que sea selección simple, que el navegador conserve el marcado y que ambas reglas appearance: base-select se apliquen. Busca también estilos que oculten el texto reflejado. No rellenes manualmente la copia para ocultar un fallo de soporte.

Para profundizar, <option> define cada alternativa, su dato y el estado inicial; <button> explica los botones habituales fuera de este contexto especial; <optgroup> agrupa opciones. Elige <selectedcontent> cuando necesites controlar la presentación de la elección; para un selector de texto sencillo, el patrón tradicional de <select> puede bastar.