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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
|
<HTML>
<HEAD>
<LINK REL=STYLESHEET TYPE="text/css" HREF="mozform.css">
<LINK REL=STYLESHEET TYPE="text/css" HREF="aform.css">
<LINK REL=STYLESHEET TYPE="text/css" HREF="bform.css">
<LINK REL=STYLESHEET TYPE="text/css" HREF="cform.css">
<LINK REL=STYLESHEET TYPE="text/css" HREF="demoform.css">
<STYLE>
.gear {
display:list-item;
list-style-position:inside;
list-style-image: url("gear1.gif");
background-color:white;
}
.eyes {
display:list-item;
list-style-position:inside;
list-style-image: url("Anieyes.gif");
background-color:white;
}
.raindrops {
display:list-item;
list-style-position:inside;
list-style-image: url("raindrops_light.gif");
background-color:white;
}
.rock {
display:list-item;
list-style-position:inside;
list-style-image: url("rock_gra.gif");
background-color:white;
}
.raptor {
display:list-item;
list-style-position:inside;
list-style-image: url("raptor.jpg");
background-color:white;
}
</STYLE>
<SCRIPT language="JavaScript">
function usestyle(styletype)
{
for (i = 0; i < 5; i++) {
if (styletype != i)
document.styleSheets[i].disabled = true;
else
document.styleSheets[i].disabled = false;
}
}
</SCRIPT>
</HEAD>
<BODY style="background-color:rgb(200, 200, 200);">
<H1>Example 16: Gfx rendered widgets</H1>
<P> This test requires gfx rendering to be enabled</P>
<FORM>
<INPUT type=button onclick="usestyle(4)" value="Demo Style">
<INPUT type=button onclick="usestyle(0)" value="Mozilla Style">
<INPUT type=button onclick="usestyle(1)" value="Style A">
<INPUT type=button onclick="usestyle(2)" value="Style B">
<INPUT type=button onclick="usestyle(3)" value="Style C">
<BR>
<INPUT checked type=checkbox>untitled
<INPUT type=checkbox>untitled
<BR>
<INPUT checked type=radio name=radio>untitled
<INPUT type=radio name=radio>untitled
<BR>
<INPUT type=button value="test">
<INPUT type=button style="font-weight:bold;" value="test">
<BR>
<BR>
<SELECT size=1>
<OPTION>item 1</OPTION>
<OPTION>item 2</OPTION>
<OPTION selected>item 3</OPTION>
<OPTION>item 4</OPTION>
<OPTION>item 5</OPTION>
</SELECT>
<SELECT size=4>
<OPTION>option 1</OPTION>
<OPTION selected>option 2</OPTION>
<OPTION>option 3</OPTION>
<OPTION>option 4</OPTION>
</SELECT>
<SELECT size=1>
<OPTGROUP>group 1
<OPTION>option A</OPTION>
<OPTION>option B</OPTION>
</OPTGROUP>group 1
<OPTGROUP>group 2
<OPTION>option C</OPTION>
<OPTION>option D</OPTION>
</OPTGROUP>group 2
</SELECT>
<SELECT size = 4>
<OPTGROUP>group 1
<OPTION>option A</OPTION>
<OPTION>option B</OPTION>
</OPTGROUP>group 1
<OPTGROUP>group 2
<OPTION>option C</OPTION>
<OPTION>option D</OPTION>
</OPTGROUP>group 2
</SELECT>
<!--SELECT size=1 style="width:120px;">
<OPTION class="gear">gears<OPTION>
<OPTION class="eyes">eyes<OPTION>
</SELECT-->
</FORM>
</BODY>
</HTML>
|
