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>

More Related Contents:

  1. What is the difference between visibility:hidden and display:none?
  2. What does the “+” (plus sign) CSS selector mean?
  3. What is the difference between Normalize.css and Reset CSS?
  4. CSS \9 in width property
  5. Opacity CSS not working in IE8
  6. CSS hover border makes inline elements adjust slightly
  7. What is the meaning of “cascading’ in CSS?
  8. Justify the last line of a div?
  9. Difference between @import and link in CSS
  10. Angular-cli from css to scss
  11. Media query to detect if device is touchscreen
  12. CSS: Hover one element, effect for multiple elements?
  13. Position a CSS background image x pixels from the right?
  14. Style certain characters with CSS
  15. What is the difference between :focus and :active?
  16. Why does ‘overflow: auto’ clear floats? And why are clear floats needed?
  17. Bootstrap grid with fixed wrapper – Prevent columns from stacking up
  18. font-size vs line-height vs actual height
  19. In which direction do selector engines read, exactly?
  20. HTML not loading CSS file
  21. Add ellipses to overflowing text in SVG?
  22. Less lists as a mixin argument(s)
  23. What is the difference between `margin` and `padding` in CSS?
  24. How to show the first N elements of a block and hide the others in css?
  25. Width equal to content [duplicate]
  26. Align form elements in CSS
  27. What is the difference between pseudo-classes and pseudo-elements?
  28. How to fade the edge of a div with just CSS? [duplicate]
  29. css: the meaning of * mark
  30. input type=”image” shows unwanted border in Chrome and broken link in IE7

Leave a Comment