grid-self-alignment-stretch-input-range.html (1381B)
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 Test: 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 <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property"> 11 <link rel="match" href="grid-self-alignment-stretch-input-range-ref.html"> 12 <style> 13 html,body { 14 color:black; background-color:white; font:16px/1 monospace; 15 } 16 17 input { 18 margin:0; 19 padding:0; 20 border:none; 21 } 22 23 .grid { 24 display: inline-grid; 25 grid: 80px / 300px; 26 place-items: stretch; 27 border:1px solid; 28 } 29 30 .zero { grid:0/0; } 31 32 .none input { -webkit-appearance:none; } 33 34 </style> 35 </head> 36 <body> 37 38 <div class="grid"><input type=range></div> 39 <br> 40 <div class="grid zero"><input type=range></div> 41 <br> 42 <div class="grid"><input type=range style="place-self:normal"></div> 43 <br> 44 <div class="grid zero"><input type=range style="place-self:normal"></div> 45 <br> 46 47 <div class="none"> 48 <div class="grid"><input type=range></div> 49 <br> 50 <div class="grid zero"><input type=range></div> 51 <br> 52 <div class="grid"><input type=range style="place-self:normal"></div> 53 <br> 54 <div class="grid zero"><input type=range style="place-self:normal"></div> 55 </div> 56 57 </body> 58 </html>