将填充添加到HTML文本input字段

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

所以，而不是 ，我会得到的 。

所以，相同的行为只是一些空白的权利。

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

有没有办法做到这一点（或假的）？

Answer 1

填充右键为我在Firefox / Chrome在Windows上，但不是在IE浏览器。 欢迎来到IE标准违规的美妙世界。

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

HTML

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

CSS

 .foo { padding-right: 20px; } 

Answer 2

您可以像下面这样为input提供填充：

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+ */ } 

框的大小使input宽度保持在250px，而不是由于填充增加到260px。

供参考 。

Answer 3

填充权利应该工作。 示例链接。

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

你可以解决这个问题，把一个div内的input标签，然后把填充属性放在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; }