position-absolute-semi-replaced-stretch-input-ref.html (968B)
1 <!DOCTYPE html> 2 <style> 3 .cb { 4 position: relative; 5 border: 3px solid black; 6 height: 100px; 7 width: 150px; 8 display: inline-block; 9 vertical-align: top; 10 margin: 5px; 11 } 12 .wide { 13 width: 350px; 14 } 15 .abs { 16 margin: 0; 17 position: absolute; 18 box-sizing: border-box; 19 top: 3px; 20 left: 3px; 21 outline: 2px solid lime; 22 width: calc(100% - 6px); 23 height: calc(100% - 6px); 24 } 25 </style> 26 <div class="cb"><input type="button" class="abs" value="input-btn"></div> 27 <div class="cb"><input type="submit" class="abs"></div> 28 <div class="cb"><input type="reset" class="abs"></div> 29 <div class="cb"><input type="color" class="abs"></div> 30 <div class="cb wide"><input type="text" class="abs" value="text"></div> 31 <div class="cb wide"><input type="password" class="abs" value="pass"></div> 32 <div class="cb wide"><input type="date" class="abs" value="text"></div> 33 <div class="cb wide"><input type="file" class="abs"></div> 34 <div class="cb wide"><input type="range" class="abs"></div>