grid-self-alignment-stretch-input-range-ref.html (1462B)
1 <!DOCTYPE HTML> 2 <!-- 3 Any copyright is dedicated to the Public Domain. 4 http://creativecommons.org/publicdomain/zero/1.0/ 5 --> 6 <html><head> 7 <meta charset="utf-8"> 8 <title>CSS Grid Reference: align/justify-self on range INPUT items</title> 9 <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id="> 10 <style> 11 html,body { 12 color:black; background-color:white; font:16px/1 monospace; 13 } 14 15 input { 16 margin:0; 17 padding:0; 18 border:none; /* NOTE: On Windows, GetWidgetBorder returns 1px on all sides, 19 so we need the next declaration for the width/height to match: */ 20 box-sizing: border-box; 21 width:300px; 22 height:80px; 23 } 24 25 .grid { 26 display: inline-grid; 27 grid: 80px / 300px; 28 place-items: stretch; 29 border:1px solid; 30 } 31 32 .zero { grid:0/0; } 33 .zero input { width:0; height:0; } 34 35 .none input { -webkit-appearance:none; } 36 37 </style> 38 </head> 39 <body> 40 41 <div class="grid"><input type=range></div> 42 <br> 43 <div class="grid zero"><input type=range></div> 44 <br> 45 <div class="grid"><input type=range style="place-self:normal"></div> 46 <br> 47 <div class="grid zero"><input type=range style="place-self:normal"></div> 48 <br> 49 50 <div class="none"> 51 <div class="grid"><input type=range></div> 52 <br> 53 <div class="grid zero"><input type=range></div> 54 <br> 55 <div class="grid"><input type=range style="place-self:normal"></div> 56 <br> 57 <div class="grid zero"><input type=range style="place-self:normal"></div> 58 </div> 59 60 </body> 61 </html>