Relleno dentro de las entradas rompe el ancho 100%

Question

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

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

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

La segunda entrada se ha fijado como relleno para 5px, que mucho me 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 ancho del 100%.

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

¿Hay alguna manera de agregar relleno dentro de la entrada mientras se mantiene el ancho al 100%? Debe estar al 100%, ya que los formularios se mostrarán con diferentes valores de ancho para los padres, por lo que no sé de antemano el ancho del elemento principal.

Answer 1

No sé cómo navegadores compatibles es (funciona en Firefox y Safari), pero se puede probar esta solución:

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

(Sólo registraron los valores que he cambiado)

Answer 2

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

Answer 3

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

Answer 4

Una opción es envolver el INPUT en un DIV que 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> 

Answer 5

he estado teniendo 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%; 
} 

de relleno de 8 píxeles para incluir la frontera y el relleno de la entrada/área de texto. Espero que esto ayude!

Answer 6

Una de las soluciones que he encontrado que funciona es colocar absolutamente la entrada con una etiqueta principal relativamente posicionada.

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

La aplicar 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; 
} 

La única cosa a tener en cuenta es que la etiqueta de párrafo debe establecer como sus hijos posición absoluta no se expandirán su altura una altura. Esto evita la necesidad de establecer width: 100% bloqueándolo en los lados izquierdo y derecho del elemento principal.

Answer 7

El uso de CSS 3 se puede utilizar la propiedad cuadro de dimensionamiento para alterar la forma en que el navegador calcular la de la entrada con.

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/

Answer 8

Trate de usar porcentajes para su padding:

.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 usted está preocupado por los usuarios en los navegadores antiguos que no pueden ver el box-shadow, solo dale a la entrada un color de fondo sutil como respaldo. Si usa píxeles para este tipo de cosas, entonces es probable que las esté utilizando en otro lugar, lo que podría presentar algunos desafíos adicionales, avíseme si los encuentra.

Answer 9

El tantas veces olvidado calc puede venir al rescate aquí:

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

Como sabemos el relleno se sumará a la anchura del elemento, que sólo hay que restar el relleno de la anchura total. Es compatible con todos los principales navegadores, es receptivo y no requiere divs de envoltura desordenados.