third_party/WebKit/LayoutTests/fast/forms/checkbox/checkbox-appearance-basic.html

   1 <!DOCTYPE html>
   2 <body>
   3 <style>
   4 input {
   5     margin: 4px;
   6 }
   7 </style>
   8
   9 <!-- no style for reference -->
  10 <input type="checkbox">
  11 <input type="checkbox" checked>
  12 <br>
  13
  14 <!-- border -->
  15 <input type="checkbox" style="border: 3px solid lime;">
  16 <input type="checkbox" style="border-radius: 6px;"> <br>
  17
  18 <!-- background -->
  19 <input type="checkbox" style="background: linear-gradient(to bottom, #dea 0%,#9c7 44%,#494 100%);"> <br>
  20
  21 <!-- shadow -->
  22 <input type="checkbox" style="box-shadow: 4px 4px 10px rgba(255,0,0,0.5), inset 4px 4px 4px rgba(0,255,0,0.5);"> <br>
  23
  24 <!-- size -->
  25 <input type="checkbox" style="width: 8px; height; 8px;">
  26 <input type="checkbox" style="width: 16px; height; 16px;">
  27 <input type="checkbox" style="width: 24px; height; 24px;"> <br>
  28
  29 <!-- zoom -->
  30 <input type="checkbox" style="zoom: 1.5;" id="zoomed15">
  31 <input type="checkbox" style="zoom: 2;"> <br>
  32 <script>
  33 document.querySelector('#zoomed15').focus();
  34 </script>
  35 </body>