Add padding to HTML text input field - html

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)?

Answer 1

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.

Answer 2

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

Answer 3

padding-right should work. Example linked.
http://jsfiddle.net/8Ged8/

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

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

Answer 6

<input class="form-control search-query input_style" placeholder="Search…" name="" title="Search for:" type="text">
.input_style
{
padding-left:20px;
}