O preenchimento nas entradas quebra a largura 100%

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.

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/

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)

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>

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.

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!

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?

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.

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.

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