Dimensionamento de campos do CSS

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

Adam Argyle

Sem a 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 o JavaScript para contar caracteres e aumentar a altura ou a largura do elemento à medida que o usuário digitava. Em outras palavras, não era fácil e era propenso 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 em 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 vídeo ótimo no Twitter para apresentar field-sizing a você.

Quais elementos são afetados pelo dimensionamento de campo?

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

<textarea>

A entrada é recolhida para uma min-inline-size ou para caber no marcador.

À medida que o usuário digita, a entrada cresce na direção inline até atingir um tamanho máximo inline. Nesse momento, o texto é unido e o tamanho do bloco da entrada aumenta para se ajustar à nova linha.

<select> e <select multiple>

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

Uma seleção com o atributo multiple cresce para se encaixar na opção mais ampla e para ter a altura necessária para atender ao número de opções.

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

A entrada é recolhida para uma min-inline-size ou para caber no marcador.

À medida que o usuário digita, a entrada cresce na direção inline até atingir um max-inline-size. Nesse ponto, o estouro recorta o valor de entrada.

<input type="file">

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

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

Como acessar, testar e comparar resultados

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

Olhando de perto

Ao usar um [placeholder], o marcador se torna o conteúdo. Isso já foi mencionado, mas mencionado aqui, porque é importante saber ao estilizar um formulário. Um marcador longo ou curto muda o tamanho intrínseco das entradas com field-sizing: content.

Processamento de estilo vazio e flutuante

Usar field-sizing significa que você precisa fazer mais algum trabalho. Ahmad Shadeed chama isso de "CSS defensivo", em que o objetivo não é necessariamente explicar exatamente como algo deve se comportar ou parecer, mas protegê-lo de um estado visual indesejável. Anteriormente, as entradas tinham vários tamanhos fixos, mas depois de aplicar field-sizing: content, as entradas podem se tornar muito pequenas ou muito grandes.

Os estilos a seguir são um bom ponto de partida. Eles ajudam os elementos a não recolherem em uma caixa muito pequena e também, no caso de textarea, a não crescerem muito.

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. O novo bloco lh é perfeito para os tamanhos dos blocos, e ch funciona bem para os tamanhos inline.

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

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