El relleno dentro de las entradas rompe el ancho 100%


130

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.


3
Consulte stackoverflow.com/questions/628500/… para saber cómo usar el box-sizingatributo CSS3
Daniel LeCheminant el

15
Solo tengo que decir, gracias por mantener su página de ejemplo activa todo este tiempo. Me vuelve loco cuando alguien publica una url en la pregunta y está abajo después de que se responde la respuesta o no usan algo como jsfiddle.
Jonathan Dumaine

Con respecto al uso del atributo box-sizing; mi problema era el mismo problema, pero con la altura: establecer la altura al 100% solo significa altura + borde + relleno = altura del contenedor. Para que la entrada tenga la altura real del contenedor, simplemente necesitaba usar box-sizing: content-box.
Skychan

Excepto que lo que acabo de decir no funciona en IE. IE11 con box-sizing: content-box no ajusta la altura en absoluto con la altura: 100%. Lo respeta con una altura específica de px. Por lo tanto, la altura: 31px sin tamaño de caja es 6px menor que la altura: 31px + tamaño de caja: content-box. Pero la idea es usar la altura: 100%, ¡así que no me preocupa el tamaño de píxel específico!
Skychan

Respuestas:


288

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/


@ Víctor Dieppa Garriga Gracias, es una gran solución.
sinanakyazici

1
El soporte es el siguiente: Chrome (cualquiera): tamaño de caja Opera 8.5+: tamaño de caja Firefox (cualquiera): -moz-box-tamaño Safari 3: -webkit-box-tamaño (sin prefijo en versiones 5.1+) IE8 +: caja -dimensionamiento. También recomiendo esto para la respuesta aceptada, es una solución más elegante.
Baconbeastnz

1
Para aclarar la compatibilidad con el tamaño de cuadro en IE, la propiedad de tamaño de cuadro de IE depende del Modo de documento de IE, funciona en el "Modo de estándares IE8" y superior. Por lo tanto, funcionará en la versión del navegador IE8 también si el modo de documento es "Modo de estándares IE8". Espero que esto ayude
Sanjeev

Honestamente, box-sizing: border-box;es lo primero en lo que pensé, pero absolutamente no funciona para mí. ¿Quizás el tatarabuelo display: flex;está jugando con esto?
Cody

Parece que es compatible con todos los principales navegadores sin prefijo, y ha sido para varias versiones: caniuse.com/#feat=css3-boxsizing
Jason

7

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é)


1
Causa problemas en IE.
Tarik

Bueno, eso no me sorprende mucho :) No piense que hay una solución fácil de navegador cruzado sin cambiar el marcado.
michaelk

Ok, estoy votando esta solución ahora desde que agregué margen: -5px aparentemente no es una violación. He agregado una cuarta entrada a la página que usa esto y parece que realmente funciona. jigsaw.w3.org/css-validator/…
Sandman

7

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>

8
El relleno de un contenedor div produce resultados no idénticos a la adición de relleno a un campo de entrada.
Felix Fung

Agregue a lo que dijo Felix Fung: pierde la capacidad de hacer clic con el mouse en el área de relleno y hacer que enfoque el campo de entrada, entre otros problemas más notables. Solo quería señalar este problema menos conocido / conocido: me molesta mucho cuando uso páginas web que usan este truco.
eselk

5

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.


4

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!


ESTA técnica funciona muy bien para alinear el ancho de celdas que contienen entradas rellenadas con celdas que no lo hacen. Simplemente aplique el relleno de forma selectiva a cualquier TD que contenga una entrada de 100% de ancho.
Seb Barre

1

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?


Ese es el tipo de pirateo que estoy usando actualmente para este problema, pero prefiero usar el borde en la entrada por "razones de estilo" o cualquier otra cosa. Pero sí, esta es la forma en que estoy haciendo actualmente por lo que es una solución viable
Sandman

1

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.


0

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.


-3

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

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.