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

score 116 · Answer 1 · answered Feb 28 '12 at 15:38

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.

score 101 · Accepted Answer · edited Apr 24 '14 at 16:35

101

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

edited Apr 24 '14 at 16:35

IluTov

6,807
6
41
103

answered Jul 05 '11 at 17:19

evan

12,307
7
37
51

score 7 · Answer 3 · answered Jul 05 '11 at 17:14

7

padding-right should work. Example linked.

http://jsfiddle.net/8Ged8/

answered Jul 05 '11 at 17:14

Jeff Parker

7,367
1
22
25

Anbazhagan Devaraj · Answer 4 · 2013-08-20T07:30:50.417

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

score 3 · Answer 5 · answered Jul 18 '16 at 18:42

3

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

answered Jul 18 '16 at 18:42

Carlos Rafael

51
4

score 2 · Answer 6 · edited Jul 24 '17 at 08:29

2

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


.input_style
{
    padding-left:20px;
}

edited Jul 24 '17 at 08:29

Carl Binalla

5,393
5
27
46

answered Jul 24 '17 at 06:23

Md Khairul Islam

371
2
4

add input_style class in your input tag & add this code in your css file – Md Khairul Islam Jul 24 '17 at 06:27
Add more info about your solution – Ori Marko Jul 24 '17 at 06:47

score 0 · Answer 7 · answered May 26 '23 at 01:29

0

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

answered May 26 '23 at 01:29

hexler baku

1

1

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](/help/how-to-answer). – Community May 26 '23 at 05:57

Add padding to HTML text input field

7 Answers7

HTML

For Other Browsers:

For IE:

Linked