Locking input elements on Firefox

Question

I'm trying to have a CSS element lock to two sides of its container. The following CSS works for elements such as div, but not for input elements in Firefox

left: 20px; right: 20px; top: 20px; height: 20px; width: auto; position: absolute;

I've found I can wrap the element in a DIV, but doing so is not really an option as it is very impractical in my situation.

Answer 1

Have you tried the following?

width: 100%

According to w3schools, it should expand to containing element.

Answer 2

The reason width: auto doesn't work for inputs in Mozilla is because they have an intrinsic width which is set by the size attribute, defaulting to 20 when the attribute is not declared.

I don't see an easy way around that. The usual cross-browser compatible way is the div wrapper with a margin then setting the width of the div to 100% inside that. This is necessary for IE6 too, which doesn't support absolute edge positioning (setting left and right but not width, or top and bottom but not height) on any element.

Answer 3

Have you tried applying display: block?