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