Добавить отступ в поле ввода текста 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 из-за заполнения.

Для справки .

Answer 2

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

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 class="form-control search-query input_style" placeholder="Search…"  name="" title="Search for:" type="text">


.input_style
{
    padding-left:20px;
}

Answer 6

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

Как это:

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

и css:

.paded{
    padding-right: 20px;
}