position-absolute-semi-replaced-stretch-input.html (1381B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/6789"> 3 <link rel="match" href="position-absolute-semi-replaced-stretch-input-ref.html"> 4 <title>Semi-replaced elements should stretch with an auto main size, and explicit insets in that direction.</title> 5 <style> 6 .cb { 7 position: relative; 8 border: 3px solid black; 9 height: 100px; 10 width: 150px; 11 display: inline-block; 12 vertical-align: top; 13 margin: 5px; 14 } 15 .wide { 16 /* Some of the form controls are wider than others 17 and need a wider CB in order to see if they're 18 stretching or shrinking. */ 19 width: 350px; 20 } 21 .abs { 22 margin: 0; 23 position: absolute; 24 box-sizing: border-box; 25 top: 3px; 26 right: 3px; 27 bottom: 3px; 28 left: 3px; 29 outline: 2px solid lime; 30 width: auto; 31 height: auto; 32 } 33 </style> 34 <div class="cb"><input type="button" class="abs" value="input-btn"></div> 35 <div class="cb"><input type="submit" class="abs"></div> 36 <div class="cb"><input type="reset" class="abs"></div> 37 <div class="cb"><input type="color" class="abs"></div> 38 <div class="cb wide"><input type="text" class="abs" value="text"></div> 39 <div class="cb wide"><input type="password" class="abs" value="pass"></div> 40 <div class="cb wide"><input type="date" class="abs" value="text"></div> 41 <div class="cb wide"><input type="file" class="abs"></div> 42 <div class="cb wide"><input type="range" class="abs"></div>