Estilizar los controles que dibuja el navegador en CSS

Algunas partes de un control de formulario son tuyas y otras pertenecen al navegador.

:root { accent-color: #2b6cb0; }

.select {
  appearance: none;
  padding: 0.5rem 2rem 0.5rem 0.75rem;
  border: 1px solid #cbd5e1;
  border-radius: 0.375rem;
  background: url("/img/chevron.svg") no-repeat right 0.6rem center;
}

.input:user-invalid { border-color: #dc2626; }
.input:placeholder-shown { font-style: italic; }

.grow {
  field-sizing: content;
  min-block-size: 3lh;
}

Cómo funciona

1. accent-color recolorea checkboxes, radios y range sin reconstruir nada.
2. appearance: none te entrega el control completo, bordes y flecha incluidos.
3. field-sizing: content deja que un textarea crezca con lo que se escribe.

Palabras clave y builtins usados aquí

• appearance
• background
• border
• content
• padding
• px
• rem
• url

El intento, en números

Líneas

17

Caracteres a escribir

371

Tokens

84

Ritmo de tres estrellas

85 tpm

Al ritmo de tres estrellas de 85 tokens por minuto, este intento toma unos 59 segundos.

Escribe este fragmento

Paso 2 de 2 en Controles; paso 2 de 13 en Dar estilo a componentes.

← Anterior Siguiente →