width: auto para campos <input>

122

Pergunta CSS para iniciantes. Eu pensei width:autoque um display:blockelemento significava 'preencher o espaço disponível'. No entanto, para um <input>elemento, isso não parece ser o caso. Por exemplo:

<body>
<form style='background-color:red'>
<input type='text' style='background-color:green;display:block;width:auto'>
</form>
</body>

Duas perguntas então:

  1. Existe uma definição de exatamente qual largura: auto significa? A especificação CSS parece vaga para mim, mas talvez eu tenha perdido a seção relevante.

  2. Existe uma maneira de alcançar o meu comportamento esperado para um campo de entrada - ou seja. preencher o espaço disponível como outros elementos no nível do bloco?

Obrigado!

css richb
fonte
possível duplicação de entrada com display: bloco não é um bloco, por que não?
Phrogz
@Phrogz Sim, é uma duplicata. Eu procurei, mas não o encontrei. THX.
richb

Respostas:

88

A <input>largura de uma é gerada a partir de seu sizeatributo. O padrão sizeé o que está direcionando a largura automática.

Você pode tentar width:100%como ilustrado no meu exemplo abaixo.

Não preenche a largura:

<form action='' method='post' style='width:200px;background:khaki'>
  <input style='width:auto' />
</form>

Preenche a largura:

<form action='' method='post' style='width:200px;background:khaki'>
  <input style='width:100%' />
</form>

Tamanho menor, largura menor:

<form action='' method='post' style='width:200px;background:khaki'>
  <input size='5' />
</form>

ATUALIZAR

Aqui está o melhor que eu poderia fazer depois de alguns minutos. É 1px de desconto no FF, Chrome e Safari, e perfeito no IE. (O problema é # ^ & * O IE aplica bordas de maneira diferente de todos os outros, por isso não é consistente.)

<div style='padding:30px;width:200px;background:red'>
  <form action='' method='post' style='width:200px;background:blue;padding:3px'>
    <input size='' style='width:100%;margin:-3px;border:2px inset #eee' />
    <br /><br />
    <input size='' style='width:100%' />
  </form>
</div>
Ben
fonte
24
Obrigado. width: 100% não é a mesma coisa. Estourará a caixa pai se houver margens ou uma borda.
richb
1
Você pode defini-los explicitamente para ajustar como quiser, por exemplo border:2px inset #eee; margin:-2px. Ainda não testei, mas algo nesse sentido.
Ben
3
Obrigado Steve. Você também deve conferir stackoverflow.com/questions/1030793/…, que tem outras idéias interessantes.
richb
1
Solução épica para larguras consistentes através css em campos de entrada, 1
Stephen Polvilhe
11
você pode usar definir a propriedade de dimensionamento da caixa de entradas como border-box para impedir que a borda se sobreponha ao contêiner.
Nicholas
26

"Existe uma definição exata de qual largura: auto significa? A especificação do CSS parece vaga para mim, mas talvez eu tenha perdido a seção relevante."

Na verdade, ninguém respondeu à parte acima da pergunta do pôster original.

Aqui está a resposta: http://www.456bereastreet.com/archive/201112/the_difference_between_widthauto_and_width100/

Desde que o valor da largura seja automático, o elemento pode ter margem horizontal, preenchimento e borda sem se tornar maior que seu contêiner ...

Por outro lado, se você especificar width: 100%, a largura total do elemento será 100% do seu bloco contendo mais qualquer margem horizontal, preenchimento e borda ... Isso pode ser o que você deseja, mas provavelmente não é .

Para visualizar a diferença, fiz um exemplo: http://www.456bereastreet.com/lab/width-auto/

resposta
fonte
4
boa resposta / link, sugiro colocar um terceiro exemplo com "caixa-uma goma: Beira-box" ...
halfbit
isso não é para uma entrada e, como auto é o padrão, não vejo como isso é útil.
Barbz_YHOOL
9

Conforme declarado na outra resposta, width: auto não funciona devido à largura gerada pelo atributo de tamanho da entrada, que não pode ser definido como "auto" ou algo semelhante.

Existem algumas soluções alternativas que você pode usar para que ele funcione bem com o modelo de caixa, mas nada fantástico até onde eu sei.

Primeiro, você pode definir o preenchimento no campo usando porcentagens, certificando-se de que a largura seja de até 100%, por exemplo:

input {
  width: 98%;
  padding: 1%;
}

Outra coisa que você pode tentar é usar o posicionamento absoluto, com a esquerda e a direita definidas como 0. Usando esta marcação:

<fieldset>
    <input type="text" />
</fieldset>

E este CSS:

fieldset {
  position: relative;
}

input {
    position: absolute;
    left: 0;
    right: 0;
}

Esse posicionamento absoluto fará com que a entrada preencha o conjunto de campos pai horizontalmente, independentemente do preenchimento ou da margem da entrada. No entanto, uma grande desvantagem disso é que agora você precisa lidar com a altura do conjunto de campos, que será 0, a menos que você o defina. Se suas entradas tiverem a mesma altura, isso funcionará para você, simplesmente defina a altura do conjunto de campos para qualquer que seja a altura da entrada.

Fora isso, existem algumas soluções JS, mas não gosto de aplicar estilos básicos com JS.

Jon Raasch
fonte
8

Porque input's widthé controlado por ele de sizeatributo, isto é como eu inicializar um input widthde acordo com seu conteúdo:

<input type="text" class="form-list-item-name" [size]="myInput.value.length" #myInput>
Fabricio
fonte
1
Embora essa #angularresposta específica não seja válida para a pergunta do OP (e não estou votando), vim para esse tópico apenas para encontrar essa ideia em particular.
nobug
5

Pode não ser exatamente o que você deseja, mas minha solução alternativa é aplicar o estilo de largura automática a uma div de wrapper - depois defina sua entrada como 100%.

mwilcox
fonte
0

A única opção em que consigo pensar é usar width:100%. Se você também deseja colocar um preenchimento no campo de entrada, basta colocar um contêiner labelao redor dele, mova a formatação para esse rótulo e especifique o preenchimento para o rótulo. Os campos de entrada são rígidos.

Lajos Meszaros
fonte
0

Resposta 1 - "resposta" deu uma boa resposta / link para ele. Para resumir, "auto" é o padrão, por isso é como remover qualquer alteração na largura de um elemento

Resposta 2 - use em seu width: 100%lugar. Ele preencherá 100% do contêiner pai, nesse caso, o "formulário".

Akhil Gupta
fonte
-4

Links absolutamente incríveis que descrevem um recurso incrível absoluto:

https://css-tricks.com/snippets/css/a-guide-to-flexbox

https://www.htmllion.com/css-flexbox.html

A essência:

  1. Coloque elementos em um recipiente com display: flex;.
  2. Defina flex-grow: 1;em cada um dos elementos contidos.
  3. Se você tiver elementos dentro desses elementos contidos que também precisam crescer, repita as etapas 1 e 2 para os elementos contidos e seus elementos filhos (contidos).
  4. Adapte e ajuste de acordo com as diferentes necessidades (consulte os links).

Editar - exemplo : 

<body style="display: flex;">
  <div style="display: flex; flex-grow: 1;">
    <input type="text" style="flex-grow: 1;" />
  </div>
</body>

Andrew
fonte
Como isso está ajudando na largura automática de entradas?
Kernel
@kernel Simples. Consultar exemplo.
Andrew
A largura da entrada é sempre 100% e não o mínimo possível.
Kernel
2
A entrada ainda não tem a mesma largura que o seu conteúdo, que era a questão.
kernel
Se você ler a resposta aceita - e também a de todos os outros -, ela fará algo diferente. A questão seria então "o que você está fazendo certo, que todo mundo está fazendo errado?".
kernel