O preenchimento nas entradas quebra a largura 100%


130

Ok, sabemos que a definição de preenchimento para um objeto faz com que sua largura seja alterada, mesmo que definida explicitamente. Embora se possa argumentar a lógica por trás disso, isso causa alguns problemas com alguns elementos.

Na maioria dos casos, você apenas adiciona um elemento filho e o preenchimento ao elemento, em vez do conjunto definido como 100%, mas para entradas de formulário, essa não é uma etapa possível.

Dê uma olhada no seguinte: http://sandman.net/test/formcss.html

A segunda entrada tem seu preenchimento definido para 5px, que eu prefiro muito à configuração padrão. Infelizmente, isso faz com que a entrada aumente 10px em todas as direções, incluindo a adição de 10px à largura de 100%.

O problema aqui é que não consigo adicionar um elemento filho dentro da entrada, portanto não posso corrigi-lo. Então a questão é:

Existe alguma maneira de adicionar preenchimento dentro da entrada, mantendo a largura 100%? Ele precisa ser 100%, pois os formulários serão renderizados em pais de largura diferente, então eu não sei de antemão a largura do pai.


3
Veja stackoverflow.com/questions/628500/… para saber como usar o box-sizingatributo CSS3
Daniel LeCheminant

15
Só tenho que dizer, obrigado por manter a sua página de exemplo o tempo todo. Me deixa louco quando alguém posta um URL na pergunta e fica inativo depois que a resposta é respondida ou eles não usam algo como jsfiddle.
Jonathan Dumaine

Em relação ao uso do atributo de dimensionamento de caixa; meu problema era o mesmo problema, mas com a definição de altura como 100% sozinha significa altura + borda + preenchimento = altura do contêiner. Para que a entrada tenha a altura real do contêiner, eu simplesmente precisava usar o tamanho da caixa: content-box.
Skychan

Exceto o que eu disse não funciona no IE. IE11 com dimensionamento de caixa: a caixa de conteúdo não ajusta a altura com altura: 100%. Ele o respeita com altura específica de px. Portanto, altura: 31px sem tamanho de caixa é 6px menor que altura: 31px + tamanho de caixa: caixa de conteúdo. Mas a ideia é usar height: 100%, então não estou preocupado com o tamanho específico de pixel!
Skychan

Respostas:


288

Usando CSS3, você pode usar o tamanho da caixa de propriedades para alterar como o navegador calcula a largura da entrada .

  input.input {
    width: 100%;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
  }

Você pode ler mais sobre isso aqui: http://css-tricks.com/box-sizing/


@ Victor Dieppa Garriga Obrigado, é uma ótima solução.
precisa saber é o seguinte

1
O suporte é o seguinte: Chrome (qualquer): tamanho da caixa Opera 8.5+: tamanho da caixa Firefox (qualquer): -moz-tamanho da caixa Safari 3: -webkit-box-sizing (não corrigido nas versões 5.1+) IE8 +: box -tamanho. Também recomendo isso para a resposta aceita, é uma solução mais elegante.
Baconbeastnz

1
Para esclarecer o suporte ao tamanho da caixa no IE, a propriedade de tamanho da caixa do IE depende do modo de documento do IE, funciona no "modo de padrões do IE8" e superior. Portanto, ele funcionará na versão do navegador IE8 também se o modo de documento for "modo IE8 Standards". Espero que isso ajude
Sanjeev

Honestamente, box-sizing: border-box;é a primeira coisa que pensei, mas absolutamente não está funcionando para mim. Talvez o display: flex;tataravô esteja mexendo com isso?
Cody

Parece que é suportado em todos os principais navegadores sem prefixo, e tem sido por várias versoins: caniuse.com/#feat=css3-boxsizing
Jason

7

Não sei como é compatível com vários navegadores (funciona no firefox e no safari), mas você pode tentar esta solução:

DIV.formvalue {
padding: 15px;
}
input.input {
margin: -5px;
}

(Somente postou os valores que alterei)


1
Isso causa problemas no IE.
Tarik

Bem, isso não me surpreende muito :) Não pense que existe uma solução fácil entre navegadores sem alterar a marcação.
9609 michaelk

Ok, estou votando nesta solução agora, já que adicionar margem: -5px aparentemente não é uma violação. Adicionei uma quarta entrada à página que usa isso e parece realmente funcionar. jigsaw.w3.org/css-validator/…
Sandman

7

Uma opção é envolver o INPUTem DIVque tem o preenchimento.

CSS:

div.formvalue {
    background-color: #eee;
    border: 1px solid red;
    padding: 10px;
    margin: 0px;
}

div.paddedInput {
    padding: 5px;
    border: 1px solid black;
    background-color: white;
}

div.paddedInput input {
    border: 0px;
    width: 100%;
}

HTML:

<div class="formvalue">
    <div class="paddedInput"><input type="text" value="Padded!" /></div>
</div>

8
O preenchimento de uma div de contêiner produz resultados não idênticos ao adicionar preenchimento a um campo de entrada.
Felix Fung

Adicione o que Felix Fung disse - Você perde a capacidade de clicar com o mouse na área de preenchimento e concentra o foco no campo de entrada - entre outras questões mais visíveis. Só queria apontar esse problema menos notado / conhecido - isso me irrita sem parar ao usar páginas da web que usam esse hack.
eselk

5

O frequentemente esquecido calcpode vir em socorro aqui:

input {
  width: calc(100% - 1em);
  padding: 0.5em;
}

Como sabemos que o preenchimento será adicionado à largura do elemento, simplesmente subtraímos o preenchimento da largura total. É suportado por todos os principais navegadores, é responsivo e não requer divs de wrapper bagunçados.


4

Eu estou tendo alguns problemas com algo semelhante a isso. Eu tenho tds com entradas de 100% e um pequeno preenchimento. O que fiz foi compensar o preenchimento no td da seguinte maneira:

.form td {
    padding-right:8px;
}

.form input, .form textarea {
    border: 1px solid black;
    padding:3px;
    width:100%;
}

preenchimento de 8px para incluir a borda e o preenchimento da área de entrada / texto. Espero que isto ajude!


ESTA técnica funciona muito bem para alinhar a largura das células que contêm entradas preenchidas com células que não .. Basta aplicar o preenchimento à direita seletivamente a qualquer TD que contenha uma entrada de largura de 100%.
Seb Barre

1

Talvez retire a borda + fundo da inpute, em vez disso, coloque-a em divcom borda + fundo e largura: 100% e defina uma margem na input?


Esse é o tipo de hack que estou usando atualmente para esse problema, mas prefiro usar a borda na entrada por "motivos de estilo" ou outros enfeites. Mas sim, é assim que eu estou fazendo atualmente então é uma solução viável
Sandman

1

Uma solução que encontrei funciona é posicionar absolutamente a entrada com uma tag pai relativamente posicionada.

<p class="full-width-input">
    <input type="text" class="text />
</p>

Aplique o estilo:

p.full-width-input {
    position: relative;
    height: 35px;
}

p.full-width-input input.text {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 5px;
}

A única coisa a ter em atenção é que a tag de parágrafo precisa de uma configuração de altura, pois seus filhos absolutamente posicionados não expandirão sua altura. Isso evita a necessidade de definir width: 100%, bloqueando-o nos lados esquerdo e direito do elemento pai.


0

Tente usar porcentagens para o seu preenchimento:

.input { 

  // remove border completely
  border: none;

  // don't forget to use the browser prefixes
  box-shadow: 0 0 0 1px silver;

  // Use PERCENTAGES for at least the horizontal padding
  padding: 5%; 

  // 100% - (2 * 5%)
  width: 90%; 

}

Se você está preocupado com os usuários de navegadores antigos que não conseguem ver a sombra da caixa, basta dar à entrada uma cor de fundo sutil como backup. Se você estiver usando pixels para esse tipo de coisa, é provável que esteja usando-os em outro lugar, o que pode apresentar alguns desafios extras, avise-me se você os encontrar.


-3

A única coisa que sei para evitar isso é atribuir valores como esses 100% -10. Mas ele tem alguns problemas de compatibilidade.

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.