次のコードがあります。
#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;
}
入力するために入力フィールドをクリックすると、入力ボックスの幅が広がります。その理由は、:focus に padding-left: 10px があるためです。パディング左が必要なので、このソリューションを引き続き使用する方法がわからず、幅の問題はありませんか?
:focus 疑似セレクターにも幅を入れてみましたが、うまくいきませんでした。私はこれを使ってみました:
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
しかし、違いはありませんでした。