L'imbottitura all'interno degli ingressi rompe la larghezza del 100%

Ok, quindi sappiamo che l'impostazione del riempimento su un oggetto fa sì che la sua larghezza cambi anche se è impostata esplicitamente. Mentre si può argomentare la logica dietro questo, provoca alcuni problemi con alcuni elementi.

Nella maggior parte dei casi, è sufficiente aggiungere un elemento figlio e aggiungere il riempimento a quello invece di quello impostato al 100%, ma per gli input del modulo non è un passaggio possibile.

Dai un'occhiata a questo: http://sandman.net/test/formcss.html

Il secondo input ha il padding impostato su 5px che preferisco di gran lunga all'impostazione predefinita. Ma sfortunatamente ciò fa aumentare l'input di 10 pixel in tutte le direzioni, incluso l'aggiunta di 10 pixel alla larghezza del 100%.

Il problema qui è che non riesco ad aggiungere un elemento figlio all'interno dell'input, quindi non posso ripararlo. Quindi la domanda è:

C'è un modo per aggiungere imbottitura all'interno dell'input mantenendo comunque la larghezza al 100%? Deve essere al 100% poiché i moduli verranno visualizzati in genitori di larghezza diversa, quindi non conosco in anticipo la larghezza del padre.

Utilizzando CSS3 è possibile utilizzare il ridimensionamento delle caselle delle proprietà per modificare il modo in cui il browser calcola la larghezza dell'input .

  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+ */
  }

Puoi leggere di più qui: http://css-tricks.com/box-sizing/

Non so quanto sia compatibile con il browser (funziona in Firefox e Safari), ma potresti provare questa soluzione:

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

(Ha pubblicato solo i valori che ho modificato)

Un'opzione è quella di avvolgere INPUTin un DIVche ha l'imbottitura.

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>

I spesso dimenticati calcpossono venire in soccorso qui:

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

Poiché sappiamo che l'imbottitura si aggiungerà alla larghezza dell'elemento, sottrarremo semplicemente l'imbottitura dalla larghezza complessiva. È supportato da tutti i principali browser, è reattivo e non richiede div di wrapper disordinati.

Ho avuto dei problemi con qualcosa di simile a questo. Ho tds con input del 100% e una piccola imbottitura. Quello che ho fatto è stato compensare l'imbottitura sul td come segue:

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

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

padding di 8px per includere il bordo e il padding dell'input / textarea. Spero che questo ti aiuti!

Forse togli il bordo + lo sfondo da input, e invece racchiudilo in un divbordo + sfondo e larghezza: 100% e imposta un margine sul input?

Una soluzione che ho trovato funziona è quella di posizionare assolutamente l'input con un tag genitore relativamente posizionato.

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

Applica lo stile:

p.full-width-input {
    position: relative;
    height: 35px;
}

p.full-width-input input.text {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 5px;
}

L'unica cosa da tenere presente è che il tag di paragrafo necessita di un'impostazione di altezza poiché i suoi figli posizionati in modo assoluto non aumenteranno la sua altezza. Questo evita la necessità di impostare width: 100%bloccandolo sui lati sinistro e destro dell'elemento genitore.

Prova a usare le percentuali per il tuo riempimento:

.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 sei preoccupato per gli utenti dei vecchi browser che non riescono a vedere il box-shadow, dai un input al colore di sfondo sottile come backup. Se stai usando i pixel per questo genere di cose, allora è probabile che li stai usando altrove, il che potrebbe presentare alcune sfide extra, fammi sapere se li incontri.

L'unica cosa che so per prevenire questo è assegnare valori come quello 100% -10. Ma ha alcuni problemi di compatibilità.