checkbox-baseline.html (1987B)
1 <!DOCTYPE HTML> 2 <!-- 3 Any copyright is dedicated to the Public Domain. 4 http://creativecommons.org/publicdomain/zero/1.0/ 5 --> 6 <html> 7 <head> 8 <meta charset="utf-8"> 9 <title>CSS Align Test: baseline of checkbox/radio</title> 10 <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1322698"> 11 <link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-terms"> 12 <link rel="match" href="checkbox-baseline-ref.html"> 13 <style> 14 body { font: 16px/1 monospace; } 15 16 div { border: 1px dashed blue; } 17 18 .none { 19 -moz-appearance: none; appearance: none; 20 -webkit-appearance: none; 21 -ms-appearance: none; 22 appearance: none; 23 width:0px; 24 height:0px; 25 } 26 .intrinsic { width:unset; height:unset; } 27 .border { border: 25px solid black; } 28 input { margin: 20px; } 29 30 </style> 31 </head> 32 <body> 33 <div><input class="none intrinsic" type="checkbox" style="background:pink; outline:10px solid black">Block</div> 34 <div><input class="none intrinsic" type="radio" style="background:pink; outline:1px solid black">Block</div> 35 <div><input class="none intrinsic border" type="checkbox">Block</div> 36 <div><input class="none intrinsic border" type="radio">Block</div> 37 <div><input class="none border" type="checkbox">Block</div> 38 <div><input class="none border" type="radio">Block</div> 39 <div><input class="none" style="margin:0; width:20px; height:20px; background-color:pink" type="checkbox" checked>Block</div> 40 <div><input class="none" style="margin:0; width:20px; height:20px; background-color:black" type="checkbox">Block</div> 41 <div><input class="none" style="margin:0; width:20px; height:20px; background-color:pink" type="radio" checked>Block</div> 42 <div><input class="none" style="margin:0; width:20px; height:20px; background-color:black" type="radio">Block</div> 43 <div style="font-size:72px"><input class="none border" type="checkbox" style="border-width:3px">Block</div> 44 </body> 45 </html>