web-dev-qa-db-ja.com

HTMLテキスト入力フィールドにパディングを追加します

フィールドの右側に空きスペースができるように、<input type="text" />の右側にスペースを追加します。

だから、代わりに 、私は得るだろう 。

そのため、同じ動作は右側の空のスペースだけです。

padding-rightを使用してみましたが、それは何もしないようです。

これを行う（または偽造する）方法はありますか？

htmlcsstextinputtextbox
52
Nathan

padding-rightはWindows上のFirefox/Chromeでは機能しますが、IEでは機能しません。 IE規格違反の素晴らしい世界へようこそ。

参照： http://jsfiddle.net/SfPju/466/

HTML

<input type="text" class="foo" value="abcdefghijklmnopqrstuvwxyz"/>

CSS

.foo
{
    padding-right: 20px;
}
68
evan

次のような入力にパディングを提供できます。

HTML：

<input type=text id=firstname />

CSS：

input {
    width: 250px;
    padding: 5px;
}

しかし、私も追加します：

input {
    width: 250px;
    padding: 5px;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}

ボックスのサイズ変更により、入力幅はパディングのために260pxに増加するのではなく、250pxのままになります。

参照用 。

90
Greg

padding-rightが機能するはずです。リンクされた例。

http://jsfiddle.net/8Ged8/

7
Jeff Parker

HTML

<div class="FieldElement"><input /></div>
<div class="searchIcon"><input type="submit" /></div>

他のブラウザのために：

.FieldElement input {
width: 413px;
border:1px solid #ccc;
padding: 0 2.5em 0 0.5em;
}

.searchIcon
{
 background: url(searchicon-image-path) no-repeat;
 width: 17px;
 height: 17px;
 text-indent: -999em;
 display: inline-block;
 left: 432px;
 top: 9px;
}

IEの場合：

.FieldElement input {
width: 380px;
border:0;
}

.FieldElement {
 border:1px solid #ccc;
 width: 455px;     
 }

.searchIcon
{
 background: url(searchicon-image-path) no-repeat;
 width: 17px;
 height: 17px;
 text-indent: -999em;
 display: inline-block;
 left: 432px;
 top: 9px;
}
3
Anbazhagan Devaraj

これを解決するには、input内にdivタグを取り、divタグにパディングプロパティを設定します。この作品は私のためです...

このような：

<div class="paded">
    <input type="text" />
</div>

およびcss：

.paded{
    padding-right: 20px;
}
0
Carlos Rafael