width auto for input fields

Question

Newbie CSS question  I thought width auto for a display block element meant  fill available space   However for an  lt input gt  element this doesn t seem to be the case  For example    lt body gt   lt form style  background-color red  gt   lt input type  text  style  background-color green display block width auto  gt   lt  form gt   lt  body gt    Two questions then    Is there a definition of exactly what width auto does mean  The CSS spec seems vague to me  but maybe I missed the relevant section  Is there a way to achieve my expected behaviour for a input field - ie  fill available space like other block level elements do    Thanks

User · Answer

Answer 1 -  response  gave a nice answer link for it  To put it in short   auto  is the default  so it is like removing any changes in the width of an element  Answer 2 - use width  100  instead  It will fill the 100  of the parent container  in this case  the  form

User · Answer

As stated in the other answer  width  auto doesn t work due to the width being generated by the input s size attribute  which cannot be set to  auto  or anything similar   There are a few workarounds you can use to cause it to play nicely with the box model  but nothing fantastic as far as I know   First you can set the padding in the field using percentages  making sure that the width adds up to 100   e g    input     width  98     padding  1       Another thing you might try is using absolute positioning  with left and right set to 0   Using this markup    lt fieldset gt       lt input type  text    gt   lt  fieldset gt    And this CSS   fieldset     position  relative     input       position  absolute      left  0      right  0      This absolute positioning will cause the input to fill the parent fieldset horizontally  regardless of the input s padding or margin  However a huge downside of this is that you now have to deal with the height of the fieldset  which will be 0 unless you set it  If your inputs are all the same height this will work for you  simply set the fieldset s height to whatever the input s height should be   Other than this there are some JS solutions  but I don t like applying basic styling with JS

User · Answer

Because input s width is controlled by it s size attribute  this is how I initialize an input width according to its content    lt input type  text  class  form-list-item-name   size   myInput value length   myInput gt

User · Answer

Is there a definition of exactly what width auto does mean  The CSS spec seems vague to me  but maybe I missed the relevant section    No one actually answered the above part of the original poster s question   Here s the answer  http   www 456bereastreet com archive 201112 the difference between widthauto and width100      As long as the value of width is auto  the element can have horizontal   margin  padding and border without becoming wider than its container         On the other hand  if you specify width 100   the element   s total   width will be 100  of its containing block plus any horizontal margin    padding and border     This may be what you want  but most likely it isn   t       To visualise the difference I made an example     http   www 456bereastreet com lab width-auto

User · Answer

An  lt input gt  s width is generated from its size attribute   The default size is what s driving the auto width   You could try width 100  as illustrated in my example below   Doesn t fill width    lt form action    method  post  style  width 200px background khaki  gt     lt input style  width auto    gt   lt  form gt    Fills width    lt form action    method  post  style  width 200px background khaki  gt     lt input style  width 100     gt   lt  form gt    Smaller size  smaller width    lt form action    method  post  style  width 200px background khaki  gt     lt input size  5    gt   lt  form gt    UPDATE  Here s the best I could do after a few minutes   It s 1px off in FF  Chrome  and Safari  and perfect in IE    The problem is    amp   IE applies borders differently than everyone else so it s not consistent     lt div style  padding 30px width 200px background red  gt     lt form action    method  post  style  width 200px background blue padding 3px  gt       lt input size    style  width 100  margin -3px border 2px inset  eee    gt       lt br   gt  lt br   gt       lt input size    style  width 100     gt     lt  form gt   lt  div gt

User · Answer

It may not be exactly what you want  but my workaround is to apply the autowidth styling to a wrapper div - then set your input to 100

User · Answer

The only option I can think of is using width 100   If you want to have a padding on the input field too  than just place a container label around it  move the formatting to that label instead  while also specify the padding to the label  Input fields are rigid

[css] width:auto for <input> fields

Examples related to css