Riempimento all'interno degli input interrompe la larghezza 100%

Question

Ok, quindi sappiamo che l'impostazione di riempimento su un oggetto ne modifica la larghezza anche se è impostata in modo esplicito. Mentre si può argomentare la logica alla base di questo, ciò causa alcuni problemi con alcuni elementi.

Per la maggior parte dei casi, basta aggiungere un elemento figlio e aggiungere padding a quello anziché a 100%, ma per gli input del modulo non è possibile.

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

Il secondo ingresso ha il suo padding impostato 5px che ho molto preferisco l'impostazione predefinita. Ma sfortunatamente questo fa crescere l'input di 10px in tutte le direzioni, inclusa l'aggiunta di 10px alla larghezza del 100%.

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

C'è un modo per aggiungere padding all'interno dell'ingresso mantenendo la larghezza al 100%? Deve essere al 100% poiché i moduli verranno visualizzati in genitori con larghezza diversa, quindi non conosco in anticipo la larghezza del genitore.

Answer 1

Non so come croce browser compatibile è (funziona in Firefox e Safari), ma si potrebbe provare questa soluzione:

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

(Solo pubblicato i valori che ho cambiato)

Answer 2

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

Answer 3

Forse togliere lo sfondo + lo sfondo dallo input e invece racchiuderlo in uno div con bordo + sfondo e larghezza: 100% e impostare un margine su input?

Answer 4

Un'opzione è quella di avvolgere il INPUT in un DIV che ha il riempimento.

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

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

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

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

imbottitura di 8px per includere il confine e imbottitura del input/textarea. Spero che questo aiuti!

Answer 6

Una soluzione che ho trovato funziona è posizionare l'input in modo assoluto con un tag padre relativamente posizionato.

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

Il applicare 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 in mente è che il tag di paragrafo ha bisogno di regolazione come i suoi figli con posizionamento assoluto non si espanderà la sua altezza di altezza. Ciò evita la necessità di impostare width: 100% bloccandolo ai lati sinistro e destro dell'elemento genitore.

Answer 7

Usando CSS3 è possibile utilizzare la proprietà box-sizing per alterare come il browser calcolare la con del di ingresso.

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

Si può leggere di più su di esso qui: http://css-tricks.com/box-sizing/

Answer 8

Prova utilizzando le percentuali per il 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%; 

} 

Se siete preoccupati per utenti su vecchi browser che non possono vedere il box-shadow, basta dare all'input un colore di sfondo sottile come backup. Se stai usando pixel per questo genere di cose, allora è probabile che tu li stia utilizzando altrove, il che potrebbe presentare alcune sfide extra, fammi sapere se le incontri.

Answer 9

Il spesso dimenticato calc può venire in soccorso qui:

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

Poiché sappiamo l'imbottitura aggiungerà alla larghezza dell'elemento, abbiamo semplicemente sottrarre l'imbottitura dalla larghezza complessiva. È supportato da tutti i principali browser, è reattivo e non richiede disordine wrapper wrapper.