10 · Select customizable

Select customizable

Estilá el dropdown del <select> con pseudo-elementos

Chrome 135+ · experimental

<select> con estilo

El nuevo appearance: base-select activa el modo customizable: el botón, el dropdown y las options son 100% estilables.

select, ::picker(select) { appearance: base-select }

::picker(select)

El pseudo-elemento que pinta la superficie del dropdown: se renderiza en el top layer, con sombras, bordes y espaciado propios.

::picker(select) { box-shadow: 0 8px 24px rgba(0,0,0,.5) }

<selectedcontent>

El elemento <selectedcontent> refleja automáticamente el contenido de la opción elegida en el botón del select.

css

/* activa el modo customizable */
.nice-select,
.nice-select::picker(select) {
  appearance: base-select;
}

/* el botón del select */
.nice-select button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
}

/* refleja la opción elegida */
.nice-select selectedcontent {
  flex: 1;
  text-align: left;
}

/* el dropdown — entra animado con @starting-style */
.nice-select::picker(select) {
  opacity: 0;
  transform: translateY(-8px) scale(.96);
  transition: opacity .25s, transform .25s,
              overlay .25s allow-discrete,
              display .25s allow-discrete;
}
.nice-select:open::picker(select) {
  opacity: 1;
  transform: translateY(0) scale(1);
}
@starting-style {
  .nice-select:open::picker(select) {
    opacity: 0;
    transform: translateY(-8px) scale(.96);
  }
}

/* stagger de las options con sibling-index() */
.nice-select option {
  transition-delay: calc(sibling-index() * .06s);
}
@starting-style {
  .nice-select:open option {
    opacity: 0;
    transform: translateX(20px);
  }
}

Nota honesta sobre soporte

Muchas de estas APIs son recientes y aún no están en todos los navegadores (ver pill de cada sección). La gracia es que todas degradan bien: el carousel sigue scrolleando, el accordion abre/cierra, el textarea funciona — solo sin el "plus" animado.