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

I want to add some space to the right of an <input type="text" /> so that there's some empty space on the right of the field.

我想在的右边添加一些空格，以便在字段右侧有一些空白区域。

So, instead of , I'd get .

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

So, same behavior just some empty space to the right.

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

I've tried using padding-right, but that doesn't seem to do anything.

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

Is there a way to do this (or fake it)?

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

6 个解决方案

#1

padding-right works for me in Firefox/Chrome on Windows but not in IE. Welcome to the wonderful world of IE standards non-compliance.

padding-right适用于Windows上的Firefox / Chrome，但不适用于IE。欢迎来到IE标准不合规的精彩世界。

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

请参阅：http：//jsfiddle.net/SfPju/466/

HTML

HTML

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

CSS

CSS

.foo
{
    padding-right: 20px;
}

#2

You can provide padding to an input like this:

您可以为输入提供填充，如下所示：

HTML:

HTML：

<input type=text id=firstname />

CSS:

CSS：

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

however I would also add:

不过我还会补充：

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

Box sizing makes the input width stay at 250px rather than increase to 260px due to the padding.

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

For reference.

以供参考。

#3

padding-right should work. Example linked.

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

http://jsfiddle.net/8Ged8/

http://jsfiddle.net/8Ged8/

#4

HTML

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

For Other Browsers:

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

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

#5

you can solve this, taking the input tag inside a div, then put the padding property on div tag. This work's for me...

你可以解决这个问题，将输入标记放在div中，然后将padding属性放在div标记上。这项工作对我来说......

Like this:

喜欢这个：

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

and css:

和css：

.paded{
    padding-right: 20px;
}

#6

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


.input_style
{
    padding-left:20px;
}