您可以像这样为输入提供填充：
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+ */
}

框大小调整使输入宽度保持在250px，而不是由于填充而增加到260px。
For reference。

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

padding-right应该可以工作。示例链接。
http://jsfiddle.net/8Ged8/

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

你可以解决这个问题，把input标签放在div里面，然后把padding属性放在div标签上。这是我的工作
像这样：

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

CSS：

.paded{
    padding-right: 20px;
}

<input class="form-control search-query input_style" placeholder="Search…"  name="" title="Search for:" type="text">

.input_style
{
    padding-left:20px;
}

我也遇到过类似的问题，用padding right固定了父容器的宽度，为我固定了它（防止在padding时改变输入的大小）。