Dimensionamento de campos do CSS

Uma linha de código para dimensionar automaticamente elementos com conteúdo editável.

Adam Argyle

Sem field-sizing, para criar um campo de entrada de tamanho adequado, era necessário adivinhar o tamanho médio de uma entrada de campo de texto ou usar JavaScript para contar caracteres e aumentar a altura ou largura do elemento conforme o usuário inseria o texto. Em outras palavras, não era fácil e estava sujeito a erros ao tentar seguir o conteúdo que um usuário inseriu 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 do que uma área de texto.

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 ótimo vídeo no Twitter apresentando o field-sizing.

Quais elementos são afetados pelo dimensionamento de campos?

Veja uma lista de elementos <form> em que o field-sizing funciona, com um resumo dos efeitos em cada um.

<textarea>

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

Conforme os usuários digitam, a entrada cresce na direção inline até atingir um tamanho inline máximo. Nesse ponto, o texto é quebrado, e o tamanho do bloco da entrada cresce para se ajustar à nova linha.

<select> e <select multiple>

O elemento de seleção é reduzido para se ajustar à opção selecionada.

Uma seleção com o atributo multiple aumenta para se ajustar à opção mais ampla e ser tão alta quanto necessário para se ajustar ao 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.

Conforme os usuários digitam, a entrada cresce na direção inline até atingir um max-inline-size, momento em que o estouro corta o valor de entrada.

<input type="file">

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

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 ver, testar e comparar resultados

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

Analisando melhor

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

Tratamento de estilos vazios e transbordantes

O uso de field-sizing significa que você precisa fazer um trabalho extra. Ahmad Shadeed chama isso de "CSS defensivo", em que o objetivo não é necessariamente definir exatamente como algo deve se comportar ou parecer, mas sim evitar que ele entre em um estado visual indesejável. Antes, as entradas tinham um tamanho fixo, mas, depois de aplicar field-sizing: content, elas podem ficar muito pequenas ou muito grandes.

Os estilos a seguir são um bom ponto de partida. Elas ajudam os elementos a não se reduzirem a uma caixa muito pequena e, no caso de textarea, a não crescerem 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;
}

Esse 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 de field-sizing?

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