0

次のコードがあります。

#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;

しかし、違いはありませんでした。

4

1 に答える 1

2

シンプル: #inputfield からパディングを削除し、高さを 28px ではなく 31px に増やし、#inputfield: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/

于 2013-04-26T03:12:15.170 に答える