immissione di testo arresto con larghezza 100% e imbottitura 10px si estende oltre la larghezza 100%

Question

sto uno stile a un input di testo con larghezza 100% e imbottitura 10px come questo:

<div class="wrapper"> 
    Outer element 
    <form method="get" id="searchform" action="#"> 
     <input type="text" class="field" name="s" id="s" placeholder="Search here..."> 
     <input type="submit" class="submit" name="submit" id="searchsubmit" value="GO"> 
    </form> 
</div> 

CSS:

.wrapper { 
    background: #ccc; 
    padding: 20px; 
    width: 200px; 
} 

#s { 
    width: 100%; 
    display:block; 
    padding: 10px; 
} 

#searchsubmit { 
    display: block; 
    width: 100%; 
    padding: 10px; 
} 

Il problema è che l'immissione del testo si estende oltre la larghezza del wrapper. See example here.

Ho provato ad aggiungere "box-sizing: border-box" e -moz-box-sizing:. Border-box", ma sto ancora vedendo l'ingresso che si estende oltre il 100% in alcuni browser ad esempio Android

c'è una soluzione a questo

Answer 1

Uso box-sizing:?

#s { 
    width: 100%; 
    display:block; 
    padding: 10px; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
} 

Here is a demo.

Nota: E 'supportato da tutti i principali browser SI nce IE8. Per Android basta non dimenticare il prefisso -webkit. More Details

Answer 2

Rimuovi left e right padding. Se hai bisogno di padding, gioca con width.

#s 
{ 
    width: 99%; 
    display:block; 
    padding: 10px 0; 
}