将填充添加到HTML文本输入字段

Question

我想在<input type="text" />的右侧添加一些空格，以便在该字段的右侧有一些空白区域。

因此，我得到而不是。

所以，同样的行为只是右边的一些空白区域。

我尝试使用padding-right，但似乎没有做任何事情。

有没有办法做到这一点（或伪造它）？

Answer 1

您可以为这样的输入提供填充：

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

Answer 2

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

Answer 3

padding-right应该可行。链接示例。

http://jsfiddle.net/8Ged8/

Answer 4

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

Answer 5

你可以解决这个问题，将input标记放在div内， 然后将padding属性放在div标记上。这项工作对我而言......

像这样：

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

和css：

.paded{
    padding-right: 20px;
}

Answer 6

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


.input_style
{
    padding-left:20px;
}