Add padding to HTML text input field

Question

I want to add some space to the right of an  lt input type  text    gt  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

User · Accepted Answer

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   lt input type  text  class  foo  value  abcdefghijklmnopqrstuvwxyz   gt    CSS   foo       padding-right  20px

User · Answer

lt input class  form-control search-query input style  placeholder  Search      name    title  Search for   type  text  gt     input style       padding-left 20px

User · Answer

HTML   lt div class  FieldElement  gt  lt input   gt  lt  div gt   lt div class  searchIcon  gt  lt input type  submit    gt  lt  div gt    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

User · Answer

You can provide padding to an input like this   HTML    lt input type text id firstname   gt    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

User · Answer

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

User · Answer

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    lt div class  paded  gt       lt input type  text    gt   lt  div gt    and css    paded      padding-right  20px

[html] Add padding to HTML text input field

Examples related to html

Examples related to css

Examples related to text

Examples related to input

Examples related to textbox