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

我想在 <input type="text" />的右边添加一些空格，这样在字段的右边就有一些空格。

因此，不是 < img src = “ https://i.imgur.com/jCdxV.jpg”/> ，而是 < img src = “ https://i.imgur.com/Bhyvc.jpg”/> 。

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

我试过使用 padding-right，但似乎没有任何效果。

有没有办法做到这一点(或假装它) ？

391395 次浏览
小开

填充-右边应该工作。示例链接。

Http://jsfiddle.net/8ged8/

小开
最佳答案

Pding-right 适合我在 Firefox/Chrome 中使用，但在 IE 中不适用。欢迎来到 IE 标准不遵从的奇妙世界。

见: http://jsfiddle.net/SfPju/466/

超文本标示语言

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

CSS

.foo
{
padding-right: 20px;
}
小开

您可以像下面这样为输入提供填充:

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。

供参考。

小开

超文本标示语言

<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里, 然后把填充属性的 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;
}

提交答案