Add padding to HTML text input field
Solution 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;
}
Solution 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.
Solution 3
padding-right should work. Example linked.
Solution 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;
}
Solution 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;
}
Nathan
Updated on July 05, 2022Comments
-
Nathan almost 2 years
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)?
-
Macas over 9 yearsThat box-sizing saved my life :D
-
Daneo almost 9 yearsSame here. Thanks for this!
-
Md Khairul Islam almost 7 yearsadd input_style class in your input tag & add this code in your css file
-
user7294900 almost 7 yearsAdd more info about your solution