El relleno dentro de las entradas rompe el ancho 100%

Ok, entonces sabemos que establecer el relleno en un objeto hace que su ancho cambie incluso si se establece explícitamente. Si bien se puede argumentar la lógica detrás de esto, causa algunos problemas con algunos elementos.

Para la mayoría de los casos, solo agrega un elemento hijo y agrega relleno a ese en lugar del conjunto al 100%, pero para las entradas de formulario, ese no es un paso posible.

Echa un vistazo a esto: http://sandman.net/test/formcss.html

La segunda entrada tiene su relleno establecido en 5px, que prefiero a la configuración predeterminada. Pero desafortunadamente, eso hace que la entrada crezca 10px en todas las direcciones, incluida la adición de 10px al 100% de ancho.

El problema aquí es que no puedo agregar un elemento hijo dentro de la entrada, así que no puedo arreglarlo. Entonces la pregunta es:

¿Hay alguna forma de agregar relleno dentro de la entrada mientras se mantiene el ancho al 100%? Debe ser 100% ya que los formularios se mostrarán en padres de ancho diferente, por lo que no sé de antemano el ancho del padre.

Usando CSS3 puede usar el tamaño del cuadro de propiedad para alterar cómo el navegador calcula el ancho de la 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+ */
  }

Puede leer más sobre esto aquí: http://css-tricks.com/box-sizing/

No sé cuán compatible es el navegador cruzado (funciona en Firefox y Safari), pero podría probar esta solución:

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

(Solo publiqué los valores que cambié)

Una opción es envolver el INPUTen un DIVque tiene el relleno.

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>

Los olvidados calcpueden venir al rescate aquí:

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

Como sabemos que el relleno se agregará al ancho del elemento, simplemente restamos el relleno del ancho total. Es compatible con todos los principales navegadores, es receptivo y no requiere divs de contenedor desordenados.

He tenido algunos problemas con algo similar a esto. Tengo tds con entradas de 100% y un pequeño relleno. Lo que hice fue compensar el relleno en el td de la siguiente manera:

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

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

relleno de 8px para incluir el borde y el relleno de la entrada / área de texto. ¡Espero que esto ayude!

Quizás quite el borde + fondo del input, y en su lugar enciérrelo en un divborde + fondo y ancho: 100%, y establezca un margen en el input?

Una solución que he encontrado que funciona es posicionar absolutamente la entrada con una etiqueta principal relativamente posicionada.

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

Aplican el 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;
}

Lo único que debe tener en cuenta es que la etiqueta de párrafo necesita una configuración de altura ya que sus elementos secundarios absolutamente posicionados no expandirán su altura. Esto evita la necesidad de establecerlo width: 100%bloqueándolo a los lados izquierdo y derecho del elemento padre.

Intenta usar porcentajes para tu relleno:

.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%; 

}

Si le preocupan los usuarios de navegadores antiguos que no pueden ver el recuadro sombreado, simplemente dé a la entrada un color de fondo sutil como respaldo. Si está utilizando píxeles para este tipo de cosas, entonces es probable que los esté utilizando en otro lugar, lo que podría presentar algunos desafíos adicionales, avíseme si los encuentra.

Lo único que sé para evitar esto es asignar valores como ese 100% -10. Pero tiene algunos problemas de compatibilidad aunque.