Добавить дополнение в поле ввода текста HTML

Я хочу добавить некоторое пространство справа от <input type="text" />, чтобы там было пустое пространство справа от поля.

Итак, вместо я бы получил .

Итак, одно и то же поведение просто пустое пространство справа.

Я пробовал использовать padding-right, но это ничего не делает.

Есть ли способ сделать это (или подделать)?

Ответ 1

padding-right работает для меня в Firefox/Chrome на Windows, но не в IE. Добро пожаловать в замечательный мир несоблюдения стандартов IE.

Смотрите: http://jsfiddle.net/SfPju/466/

HTML

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

CSS

.foo
{
    padding-right: 20px;
}

Ответ 2

Вы можете указать прописку для ввода следующим образом:

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, а не увеличивается до 260 пикселей из-за заполнения.

Для справки.

Ответ 3

padding-right должен работать. Пример связан.

http://jsfiddle.net/8Ged8/

Ответ 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;
}

Ответ 5

вы можете решить эту проблему, взяв тег input внутри div, затем поместите свойство заполнения в тег div. Эта работа для меня...

Вот так:

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

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