Dimensionamento de campos do CSS

Uma linha de código para elementos de dimensionamento automático com conteúdo editável.

Adam Argyle

Sem field-sizing, para criar um campo de entrada com o tamanho certo, era necessário estimar o tamanho médio de uma entrada de campo de texto ou usar JavaScript para contar caracteres e aumentar a altura ou a largura do elemento à medida que o usuário digitava o texto. Em outras palavras, não era fácil e era propenso a erros ao tentar seguir o conteúdo que um usuário havia inserido em uma entrada.

Com field-sizing, você precisa de uma linha de CSS para ativar o dimensionamento com base no conteúdo. Esse estilo de dimensionamento baseado em conteúdo também funciona para mais de um textarea.

textarea, select, input {
  field-sizing: content;
}

Links rápidos

Especificação | Explicação

Gosta de vídeos mais curtos?

Wes Bos e Jhey têm um vídeo ótimo no Twitter que apresenta field-sizing a você.

Quais elementos são afetados pelo dimensionamento do campo?

Esta é uma lista de elementos <form> com os quais o field-sizing funciona, com um resumo dos efeitos que ele tem em cada um.

<textarea>

A entrada é reduzida para um min-inline-size ou para se ajustar ao marcador de posição.

À medida que os usuários digitam, a entrada cresce na direção inline até atingir um tamanho máximo inline, momento em que o texto será quebrado e o tamanho do bloco da entrada vai crescer para se ajustar à nova linha.

<select> e <select multiple>

O elemento de seleção encolhe para caber na opção selecionada.

Um seletor com o atributo multiple cresce para caber na opção mais larga e ser tão alto quanto necessário para caber no número de opções.

<input type="text">, <input type="email"> e <input type="number">

A entrada é reduzida para um min-inline-size ou para se ajustar ao marcador de posição.

À medida que os usuários digitam, a entrada cresce na direção inline até chegar a um max-inline-size, momento em que o valor de entrada é cortado.

<input type="file">

A entrada é recolhida para o botão e o texto pré-preenchido do nome do arquivo.

Ao fazer upload de um arquivo, a entrada se torna tão larga quanto o botão mais o texto do nome do arquivo.

Como conferir, testar e comparar resultados

Confira um exemplo interativo e mínimo dos comportamentos antes e depois de cada elemento do formulário, conforme afetado por field-sizing.

Mais detalhes

Ao usar um [placeholder], o marcador de posição se torna o conteúdo. Isso foi mencionado anteriormente, mas é importante destacado aqui, porque é importante saber quando estilizar um formulário. Um marcador de posição longo ou curto vai mudar o tamanho intrínseco das entradas com field-sizing: content.

Processamento de estilos vazios e excedentes

O uso de field-sizing significa que você precisa fazer mais trabalho. Ahmad Shaded chama isso de "CSS defensivo", em que o objetivo não é necessariamente especificar exatamente como algo deve se comportar ou parecer, e sim protegê-lo de entrar em um estado visual indesejável. Antes, as entradas tinham uma quantidade razoável de tamanhos fixos, mas, após a aplicação de field-sizing: content, as entradas podem ficar muito pequenas ou muito grandes.

Os estilos a seguir são um bom ponto de partida. Eles ajudam os elementos a não se contrair em uma caixa muito pequena e, no caso de textarea, a não crescer demais.

textarea {
  min-block-size: 3.5rlh;
  min-inline-size: 20ch;
  max-inline-size: 50ch;
}

select {
  min-inline-size: 5ch;
  min-block-size: 1.5lh;
}

input {
  min-inline-size: 7ch;
}

Este CSS usa unidades relativas para o dimensionamento. A nova unidade lh é perfeita para os tamanhos de bloco e ch funciona bem para os tamanhos inline.

Qual é o valor padrão do dimensionamento de campo?

O valor padrão de field-sizing é fixed, e ele só aceita os dois valores de fixed ou content.