css - content - Relleno dentro de las entradas rompe ancho 100%

input type select css

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 en 100%, pero para las entradas de formulario, ese no es un paso posible.

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

La segunda entrada tiene su conjunto de relleno a 5px, que prefiero mucho 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

El cálculo a menudo olvidado puede venir al rescate aquí:

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

Como sabemos que el relleno añadirá 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 envoltura desordenados.

Answer 2

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 la 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!

Answer 3

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 la sombra de cuadro, simplemente proporcione 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 4

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

Answer 5

No sé cómo es compatible con los navegadores cruzados (funciona en Firefox y Safari), pero podrías probar esta solución:

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

(Solo publiqué los valores que cambié)

Answer 6

Tal vez saque el borde + fondo de la input , y en su lugar enciérrelo en un div con borde + fondo y ancho: 100%, y establezca un margen en la input ?

Answer 7

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

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

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

Lo único que debe tenerse en cuenta es que la etiqueta de párrafo necesita una configuración de altura, ya que sus hijos absolutamente posicionados no expandirán su altura. Esto evita la necesidad de establecer el width: 100% bloqueándolo en los lados izquierdo y derecho del elemento principal.

Answer 8

Una opción es envolver la 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 9

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