width:auto for <input> fields
css
Solution
An `<input>`'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:
<form action='' method='post' style='width:200px;background:khaki'>
<input style='width:auto' />
</form>
Fills width:
<form action='' method='post' style='width:200px;background:khaki'>
<input style='width:100%' />
</form>
Smaller size, smaller width:
<form action='' method='post' style='width:200px;background:khaki'>
<input size='5' />
</form>
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 #^&* IE applies borders differently than everyone else so it's not consistent.)
<div style='padding:30px;width:200px;background:red'>
<form action='' method='post' style='width:200px;background:blue;padding:3px'>
<input size='' style='width:100%;margin:-3px;border:2px inset #eee' />
<br /><br />
<input size='' style='width:100%' />
</form>
</div>
Problem
Newbie CSS question. I thought `width:auto` for a `display:block` element meant 'fill available space'. However for an `<input>` element this doesn't seem to be the case. For example: ``` <body> <form style='background:red'> <input type='text' style='background:green; display:block; width:auto'> </form> </body> ``` 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 behavior for a input field - ie. fill available space like other block level elements do? Thanks!