-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
57 lines (49 loc) · 1.74 KB
/
index.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
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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Select Boxes with drop shadow selection</title>
<link href="index.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1 class="h1_text">Select Boxes with drop shadow selection</h1>
<!-- All of the Node.js APIs are available in this renderer process. -->
We are using Node.js <script>document.write(process.versions.node)</script>,
Chromium <script>document.write(process.versions.chrome)</script>,
and Electron <script>document.write(process.versions.electron)</script>.
<br>
<br><br>
<!--this first select can be fully styled normally and we get the drop-down arrow -->
<!--we add an event listener to toggle the visibility of the second select-->
<!--we never let the drop-down options expand since these options cannot override the color-->
<div id="select1_div">
<select id="select1" size=1>
<option>OptionOne</option>
<option>OptionTwo</option>
<option>OptionThree</option>
</select>
</div>
<!--this second select test the size attribute, this makes back shadow work-->
<!--we just toggle its visibility based on click or drop down key on first select-->
<div id="select1_optionsdiv">
<select id="select1_options" size=3 onclick="select1()">
<option>OptionOne</option>
<option>OptionTwo</option>
<option>OptionThree</option>
</select>
</div>
<br>
<div id="select3_optionsdiv">
<select id="select1_options" size=3 >
<option>S3 OptionOne</option>
<option>S3 OptionTwo</option>
<option>S3 OptionThree</option>
</select>
</div>
</body>
<script>
// You can also require other files to run in this process
require('./renderer.js')
// require('./index.js')
</script>
</html>