layout/reftests/forms/input/range/range-border-background.html

   1 <!DOCTYPE html>
   2 <html>
   3 <style>
   4 html,body {
   5   color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
   6 }
   7 input { height: 2em; }
   8 </style>
   9 <div style="float:left">
  10 <input type=range style="background-color:rgba(0,255,0,0.3)"><br>
  11 <input type=range style="-webkit-appearance:none; background-color:rgba(0,255,0,0.3); margin:0"><br>
  12 </div>
  13
  14 <div style="float:left">
  15 <span style="background:red"><input type=range style="-webkit-appearance:none; margin:0; vertical-align:top"></span><br>
  16 </div>
  17
  18 <div style="float:left">
  19 <input type=range style="background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAE0lEQVQYlWNg+M/gTRQeVUhfhQBHR4DpEUeLigAAAABJRU5ErkJggg==)"><br>
  20 <input type=range style="-webkit-appearance:none; background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAE0lEQVQYlWNg+M/gTRQeVUhfhQBHR4DpEUeLigAAAABJRU5ErkJggg==); margin:0"><br>
  21 </div>
  22
  23 <div style="float:left">
  24 <input type=range style="border:1px solid red"><br>
  25 <input type=range style="-webkit-appearance:none; border:1px solid green; margin:0"><br>
  26 </div>