0

Please see the snippet for demo.

I'm trying to work out why browsers don't layout input elements according to the absolute positioning rules that apply to other elements. I'm specifically looking for justification in the CSS/HTML spec for this behavior.

.colorPicker {
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  border: 2px solid red;
  position: relative;
  overflow: hidden;
}

.colorPicker * {
  display: block;
  position: absolute;
  top: 5px;
  left: 5px;
  bottom: 5px;
  right: 5px;
}
<p>div is positioned correctly</p>
<div class="colorPicker">
  <div style="background: blue"></div>
</div>

<p>'color' input is not sized at all</p>
<div class="colorPicker">
  <input type="color" />
</div>

<p>'text' input is too wide</p>
<div class="colorPicker">
  <input type="text" />
</div>

<p>'button' input is not wide enough</p>
<div class="colorPicker">
  <input type="button" />
</div>
Spongman
  • 9,665
  • 8
  • 39
  • 58
  • updated the duplicate to include one talking about input and another that talk about image (where the same thing happen) – Temani Afif Apr 28 '21 at 20:28
  • neither of the so-called duplicates address the question: what is the justification in the spec for browsers not applying the left/right positioning rules to input elements. – Spongman Apr 29 '21 at 20:29
  • did you read them? I am using the Spec to justify the behavior – Temani Afif Apr 29 '21 at 20:30

1 Answers1

0

You could apply a width/height/box-sizing for elements that don't autosize with just the positioning attributes.

.colorPicker * {
  /* continued */
  width: calc(100% - 10px);
  height: calc(100% - 10px);
  
  box-sizing: border-box;
}


.colorPicker {
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  border: 2px solid red;
  position: relative;
  overflow: hidden;
}

.colorPicker * {
  display: block;
  position: absolute;
  top: 5px;
  left: 5px;
  bottom: 5px;
  right: 5px;
  width: calc(100% - 10px);
  height: calc(100% - 10px);
  
  box-sizing: border-box;
}
<p>div is positioned correctly</p>
<div class="colorPicker">
  <div style="background: blue"></div>
</div>

<p>'color' input is not sized at all</p>
<div class="colorPicker">
  <input type="color" />
</div>

<p>'text' input is too wide</p>
<div class="colorPicker">
  <input type="text" />
</div>

<p>'button' input is not wide enough</p>
<div class="colorPicker">
  <input type="button" />
</div>
Liftoff
  • 24,717
  • 13
  • 66
  • 119
  • i'm not looking for a solution (calculated width-based or otherwise). i'm looking for a discussion of where in the spec it says that input elements are not positioned according to the absolute left/right or top/bottom constraints that apply to other elements. – Spongman Apr 29 '21 at 20:30