4

私はcssでテキスト入力をカスタマイズしようとしています。その中のテキストの左に10pxの余白を持たせたいので、次を使用します:

#text{
text-indent: 10px;
border: 1px solid #333;
outline: none;
padding: 0;
margin: 0;
width: 168px;
height: 20px;
border-radius: 4px;
}

プロパティを無視しているように見える IE10 を除くすべてのブラウザで動作しtext-indentます。どうすれば修正できますか?

<input type="text" id="text" />
4

2 に答える 2

8

IE に特別なルールを使用する場合は、ルールとともに と を追加するdisplay: inline-blockと、これも修正されます。これは IE7 と 9 の両方の古いトリックでもあります。line-heighttext-indent

input.special {
    text-indent: 150px;
    display:inline-block;
    line-height: 18px;
}

トリックを行います。

これは、リキッドまたはレスポンシブ幅を使用していて、パディングのために入力の幅を調整する必要がない場合に適しています。

于 2013-03-28T04:12:54.987 に答える
8

padding-left を使用できます。すべてのブラウザで機能します。

#text {
    padding: 0 0 0 10px;
    border: 1px solid #333;
    outline: none;
    margin: 0;
    width: 158px; //decrease width with the same padding vale so that the width would stay the same
    height: 20px;
    border-radius: 4px;
}
于 2013-03-27T20:56:38.393 に答える