Как настроить ширину поля ввода при использовании: фокус?

Question

У меня есть следующий код:

#inputfield 
{ 
width: 300px; 
height: 28px; 
font-style: italic; 
outline: medium none; 
padding: 3px 0px 3px 5px; 
margin: -2px 1px 3px 0px; 
box-shadow:inset 0 0 4px 0 #dfdfdf; 
-moz-box-shadow:inset 0 0 4px 0 #dfdfdf; 
-wevkit-box-shadow:inset 0 0 4px 0 #dfdfdf; 
text-align: center; 
font-size: 16px; 
color: #9A9A9A; 
font-family: Georgia, Arial, sans-serif; 
} 
#inputfield:focus { 
color: #797f86; 
text-align: left; 
padding-left: 10px; 

}

Когда InputField щелчка для ввода в ширину поле ввода увеличивается. Причина в том, что у меня есть padding-left: 10px в фокусе. Я требую padding-left, поэтому не уверен, как использовать это решение и не иметь проблему с шириной?

Я попытался поместить ширину в: Псевдо-селектор фокуса, но не работал. Я попытался использовать это:

-moz-box-sizing:border-box; 
    -webkit-box-sizing:border-box; 
    box-sizing:border-box; 

но это не помогло.

Answer 1

Простой: удалите прокладку с #inputfield и увеличьте высоту до 31px вместо 28px и в поле #input: focus уменьшите ширину до 290px.

HTML:

<input id="inputfield" placeholder="Enter Text"> 

CSS:

#inputfield { 
width: 300px; 
height: 31px; 
font-style: italic; 
outline: medium none; 
margin: -2px 1px 3px 0px; 
box-shadow:inset 0 0 4px 0 #dfdfdf; 
-moz-box-shadow:inset 0 0 4px 0 #dfdfdf; 
-wevkit-box-shadow:inset 0 0 4px 0 #dfdfdf; 
text-align: center; 
font-size: 16px; 
color: #9A9A9A; 
font-family: Georgia, Arial, sans-serif; 
border: 1px solid #206CAF; 
} 
#inputfield:focus { 
color: #797f86; 
text-align: left; 
padding-left: 10px; 
border: 1px solid #9A9A9A; 
width: 290px; 
} 

См скрипку: http://jsfiddle.net/HjaTZ/