using position:absolute to set an inputs width

Question

A simple yet annoying one - I am tryign to set an input[type=text] width by using absolute positioning (ie right:10px;left:10px) yet I cant get it to play ball.

Does

Answer 1

Actually, what you're doing works fine. You just need to remember to set the parent element's position as well.

Then CSS it:

div {
    width: 400px;
    position: relative;
}
input {
    position: absolute;
    left: 5px;
    right: 5px;
}

This would result in the input box being 390px.

If you set the div to be flexible, then the input box would be too.

edit: seems to only work in Chrome, so you'd need to put the input inside another element. This works in FF and IE too:

with this CSS:

#parent {
    position: relative;
    width: 400px;
}
  #parent div {
      position: absolute;
      left: 5px;
      right: 5px;
  }
    #parent div input {
        width: 100%;
    }

This has the expected effect. A bit hack-ish, maybe...