Add padding to HTML text input field

Question

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.

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

Quadroon

Answer 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.

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

HTML

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

CSS

.foo
{
    padding-right: 20px;
}

Waggon

Answer 2

You can provide padding to an input like this:

HTML:

<input type=text id=firstname />

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.

For reference.

Silma

Answer 3

padding-right should work. Example linked.

http://jsfiddle.net/8Ged8/

Ferdinand

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

Dermatome

Answer 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...

Like this:

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

and css:

.paded{
    padding-right: 20px;
}

Trainbearer

Answer 6

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


.input_style
{
    padding-left:20px;
}

Nace

add input_style class in your input tag & add this code in your css file – Nace

Add more info about your solution – Eloisaeloise

Answer 7

I had a similar problem, fixing the width of the parent container with padding right fixed it for me (to prevent changing the size of the input when padding ) .

Athens

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Expressway