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 bem dimensionado, era necessário adivinhar um tamanho médio de uma entrada de campo de texto ou usar JavaScript para contar caracteres e aumentar a altura ou largura do elemento à medida que o usuário inseria 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 uma área de texto.

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

Browser Support

• 123
• 123
• 152
• 26.2

Source

Links rápidos

Especificação | Explicação

Gosta de vídeos curtos?

Wes Bos e Jhey têm um ótimo vídeo no X apresentando o field-sizing.

Quais elementos são afetados pelo dimensionamento de campo?

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

<textarea>

A entrada é recolhida 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 inline máximo. Nesse ponto, o texto é quebrado e o tamanho do bloco da entrada aumenta 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 cresce para se ajustar à opção mais larga e para ser tão alta quanto necessário para ajustar o número de opções.

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

A entrada é recolhida 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 max-inline-size. Nesse ponto, o estouro corta o valor de entrada.

<input type="file">

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

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

Visualização, teste e comparação de resultados

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

Prove o look no Codepen

Analisando mais de perto

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.

Prove o look no Codepen

Como lidar com estilos vazios e com estouro

O uso de field-sizing significa que você precisa fazer algum trabalho extra. Ahmad Shadeed chama isso de "CSS defensivo," em que o objetivo não é necessariamente explicar exatamente como algo deve se comportar ou parecer, mas sim protegê-lo de entrar em um estado visual indesejável. Anteriormente, as entradas tinham uma quantidade razoável de tamanhos fixos, mas depois de aplicar 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 serem recolhidos em uma caixa muito pequena e também, 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 lh unidade é 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 aceita apenas os dois valores de fixed ou content.