html - Width of absolute positioned input doesn't follow CSS rules

Question

I've found a really strange thing regarding styling absolute positioned input. For some reason, it doesn't follow my CSS provided rules regarding its width.

What I want to achieve is to set the width of absolute positioned input based on the left and right property (see the snippet, input should have width 100% as the div in the second example).

Here some snippet showing my problem.

.wrapper {
  height: 40px;
  width: 200px;
  position: relative;
  background-color: red;
  margin-bottom: 10px;
}

.wrapper > input {
  position: absolute;
  left: 0;
  right: 0;
  outline: 0;
  border: 0;
  top: 0;
  bottom: 0;
}

.inner {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: blue;
}

<div class="wrapper">
  <input type="text" />
</div>

<div class="wrapper">
  <div class="inner"></div>
</div>

Answer 1

The issue is that an input is not like a div element and they won't behave the same. An input element will by default have styling set by the browser and you will notice that it also have a default width which is creating the issue.

If you refer to the specification or to this previous answer you will have the following formula:

'left' + 'margin-left' + 'width' + 'margin-right' + 'right' = width of containing block

Also a list of rules and in your case the width is never auto.

For your div you will fall into this rule:

5. 'width' is 'auto', 'left' and 'right' are not 'auto', then solve for 'width'

Logically the width will be resolved after setting left and right and you will get the needed result.

For the input you will consider this:

If none of the three is 'auto': If both 'margin-left' and 'margin-right' are 'auto', solve the equation under the extra constraint that the two margins get equal values, unless this would make them negative, in which case when direction of the containing block is 'ltr' ('rtl'), set 'margin-left' ('margin-right') to zero and solve for 'margin-right' ('margin-left'). If one of 'margin-left' or 'margin-right' is 'auto', solve the equation for that value. If the values are over-constrained, ignore the value for 'left' (in case the 'direction' property of the containing block is 'rtl') or 'right' (in case 'direction' is 'ltr') and solve for that value.

A bit complex but in all the cases the width of the input will never change. Here is some basic example:

.box {
  width:300px;
  border:2px solid;
  height:250px;
  position:relative;
}
.box > input {
  border:0;
  background:green;
  position:absolute;
}
.box > input:nth-child(1) {
  left:0;
  right:0;
}
.box > input:nth-child(2) {
  top:50px;
  left:100%;
  right:0;
}
.box > input:nth-child(3) {
  top:100px;
  left:100%;
  right:100%;
}

.box > input:nth-child(4) {
  top:150px;
  left:50px;
  right:50px;
}
.box > input:nth-child(5) {
  top:200px;
  left:80px;
  right:100%;
}

<div class="box">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
</div>