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

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