width:auto for fields

by

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>

Leave a Comment

tech