593 lines
20 KiB
HTML
593 lines
20 KiB
HTML
<head>
|
|
<style>
|
|
body {
|
|
-webkit-user-select: none;
|
|
}
|
|
|
|
body > select {
|
|
padding: 10px;
|
|
margin: 20px;
|
|
display: inline-block;
|
|
border: 1px solid lightgray;
|
|
-webkit-box-sizing: border-box;
|
|
vertical-align: top;
|
|
color: rgb(220, 220, 220);
|
|
background-color: rgb(113, 141, 147);
|
|
font-family: Verdana, sans-serif;
|
|
font-size: 12px;
|
|
-webkit-user-select: text;
|
|
width: 125px;
|
|
height: 100px;
|
|
}
|
|
|
|
option[selected] {
|
|
background-color: rgb(130, 170, 170);
|
|
color: rgb(235, 235, 235);
|
|
}
|
|
|
|
::-webkit-scrollbar {
|
|
width: 13px;
|
|
height: 13px;
|
|
}
|
|
|
|
::-webkit-scrollbar-corner {
|
|
background-image: url(resources/corner.png);
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
::-webkit-scrollbar-corner:window-inactive {
|
|
background-image: url(resources/corner-inactive.png);
|
|
}
|
|
|
|
::-webkit-resizer {
|
|
background-image: url(resources/resizer.png);
|
|
background-repeat: no-repeat;
|
|
background-position: bottom right;
|
|
}
|
|
|
|
::-webkit-resizer:window-inactive {
|
|
background-image: url(resources/resizer-inactive.png);
|
|
}
|
|
|
|
::-webkit-scrollbar-track-piece:disabled {
|
|
display: none !important;
|
|
}
|
|
|
|
::-webkit-scrollbar-button:disabled {
|
|
display: none !important;
|
|
}
|
|
|
|
::-webkit-scrollbar-track:disabled {
|
|
margin: 6px;
|
|
}
|
|
|
|
/* Horizontal Scrollbar Styles */
|
|
|
|
::-webkit-scrollbar:horizontal {
|
|
-webkit-border-image: url(resources/horizontal-button.png) 0 2 0 2;
|
|
border-color: transparent;
|
|
border-width: 0 2px;
|
|
background-image: url(resources/horizontal-button-background.png);
|
|
background-repeat: repeat-x;
|
|
}
|
|
|
|
::-webkit-scrollbar:horizontal:corner-present {
|
|
border-right-width: 0;
|
|
}
|
|
|
|
::-webkit-scrollbar-track:horizontal:disabled:corner-present {
|
|
margin-right: 5px;
|
|
}
|
|
|
|
::-webkit-scrollbar:horizontal:window-inactive {
|
|
-webkit-border-image: url(resources/horizontal-button-inactive.png) 0 2 0 2;
|
|
background-image: url(resources/horizontal-button-background-inactive.png);
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:horizontal {
|
|
-webkit-border-image: url(resources/horizontal-thumb.png) 0 13 0 13;
|
|
border-color: transparent;
|
|
border-width: 0 13px;
|
|
min-width: 20px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:horizontal:hover {
|
|
-webkit-border-image: url(resources/horizontal-thumb-hover.png) 0 13 0 13;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:horizontal:active {
|
|
-webkit-border-image: url(resources/horizontal-thumb-active.png) 0 13 0 13;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:horizontal:window-inactive {
|
|
-webkit-border-image: url(resources/horizontal-thumb-inactive.png) 0 13 0 13;
|
|
}
|
|
|
|
::-webkit-scrollbar-track-piece:horizontal:start:no-button,
|
|
.double-end::-webkit-scrollbar-track-piece:horizontal:start,
|
|
.none::-webkit-scrollbar-track-piece:horizontal:start {
|
|
margin-left: 6px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track-piece:horizontal:end:no-button,
|
|
.double-start::-webkit-scrollbar-track-piece:horizontal:end,
|
|
.none::-webkit-scrollbar-track-piece:horizontal:end {
|
|
margin-right: 6px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track-piece:horizontal:end:no-button:corner-present,
|
|
.double-start::-webkit-scrollbar-track-piece:horizontal:end:corner-present,
|
|
.none::-webkit-scrollbar-track-piece:horizontal:end:corner-present {
|
|
margin-right: 5px;
|
|
}
|
|
|
|
:not(.none):not(.double-end)::-webkit-scrollbar-track-piece:horizontal:start:single-button,
|
|
:not(.none):not(.double-end)::-webkit-scrollbar-track-piece:horizontal:start:double-button,
|
|
.single::-webkit-scrollbar-track-piece:horizontal:start,
|
|
.double-start::-webkit-scrollbar-track-piece:horizontal:start,
|
|
.double-both::-webkit-scrollbar-track-piece:horizontal:start {
|
|
margin-left: -6px;
|
|
}
|
|
|
|
:not(.none):not(.double-start)::-webkit-scrollbar-track-piece:horizontal:end:single-button,
|
|
:not(.none):not(.double-start)::-webkit-scrollbar-track-piece:horizontal:end:double-button,
|
|
.single::-webkit-scrollbar-track-piece:horizontal:end,
|
|
.double-end::-webkit-scrollbar-track-piece:horizontal:end,
|
|
.double-both::-webkit-scrollbar-track-piece:horizontal:end {
|
|
margin-right: -6px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track:horizontal:disabled {
|
|
-webkit-border-image: url(resources/horizontal-track-disabled.png) 0 13 0 13;
|
|
border-color: transparent;
|
|
border-width: 0 13px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track-piece:horizontal:decrement {
|
|
-webkit-border-image: url(resources/horizontal-track.png) 0 13 0 13;
|
|
border-color: transparent;
|
|
border-width: 0 0 0 13px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track-piece:horizontal:decrement:hover {
|
|
-webkit-border-image: url(resources/horizontal-track-hover.png) 0 13 0 13;
|
|
}
|
|
|
|
::-webkit-scrollbar-track-piece:horizontal:decrement:active {
|
|
-webkit-border-image: url(resources/horizontal-track-active.png) 0 13 0 13;
|
|
}
|
|
|
|
::-webkit-scrollbar-track-piece:horizontal:increment {
|
|
-webkit-border-image: url(resources/horizontal-track.png) 0 13 0 13;
|
|
border-color: transparent;
|
|
border-width: 0 13px 0 0;
|
|
}
|
|
|
|
::-webkit-scrollbar-track-piece:horizontal:increment:hover {
|
|
-webkit-border-image: url(resources/horizontal-track-hover.png) 0 13 0 13;
|
|
}
|
|
|
|
::-webkit-scrollbar-track-piece:horizontal:increment:active {
|
|
-webkit-border-image: url(resources/horizontal-track-active.png) 0 13 0 13;
|
|
}
|
|
|
|
::-webkit-scrollbar-button:horizontal {
|
|
width: 20px;
|
|
-webkit-border-image: url(resources/horizontal-button.png) 0 2 0 2;
|
|
border-color: transparent;
|
|
border-width: 0 2px;
|
|
}
|
|
|
|
::-webkit-scrollbar-button:horizontal:decrement {
|
|
background-image: url(resources/horizontal-decrement-arrow.png), url(resources/horizontal-button-background.png);
|
|
background-repeat: no-repeat, repeat-x;
|
|
background-position: 2px 3px, 0 0;
|
|
}
|
|
|
|
::-webkit-scrollbar-button:horizontal:decrement:hover {
|
|
-webkit-border-image: url(resources/horizontal-button-hover.png) 0 2 0 2;
|
|
background-image: url(resources/horizontal-decrement-arrow.png), url(resources/horizontal-button-background-hover.png);
|
|
}
|
|
|
|
::-webkit-scrollbar-button:horizontal:decrement:active {
|
|
-webkit-border-image: url(resources/horizontal-button-active.png) 0 2 0 2;
|
|
background-image: url(resources/horizontal-decrement-arrow.png), url(resources/horizontal-button-background-active.png);
|
|
}
|
|
|
|
::-webkit-scrollbar-button:horizontal:decrement:window-inactive {
|
|
-webkit-border-image: url(resources/horizontal-button-inactive.png) 0 2 0 2;
|
|
background-image: url(resources/horizontal-decrement-arrow.png), url(resources/horizontal-button-background-inactive.png);
|
|
}
|
|
|
|
::-webkit-scrollbar-button:horizontal:increment {
|
|
background-image: url(resources/horizontal-increment-arrow.png), url(resources/horizontal-button-background.png);
|
|
background-repeat: no-repeat, repeat-x;
|
|
background-position: 7px 3px, 0 0;
|
|
}
|
|
|
|
::-webkit-scrollbar-button:horizontal:increment:hover {
|
|
-webkit-border-image: url(resources/horizontal-button-hover.png) 0 2 0 2;
|
|
background-image: url(resources/horizontal-increment-arrow.png), url(resources/horizontal-button-background-hover.png);
|
|
}
|
|
|
|
::-webkit-scrollbar-button:horizontal:increment:active {
|
|
-webkit-border-image: url(resources/horizontal-button-active.png) 0 2 0 2;
|
|
background-image: url(resources/horizontal-increment-arrow.png), url(resources/horizontal-button-background-active.png);
|
|
}
|
|
|
|
::-webkit-scrollbar-button:horizontal:increment:window-inactive {
|
|
-webkit-border-image: url(resources/horizontal-button-inactive.png) 0 2 0 2;
|
|
background-image: url(resources/horizontal-increment-arrow.png), url(resources/horizontal-button-background-inactive.png);
|
|
}
|
|
|
|
:not(.single)::-webkit-scrollbar-button:double-button:horizontal:start:decrement,
|
|
.double-start::-webkit-scrollbar-button:horizontal:start:decrement,
|
|
.double-both::-webkit-scrollbar-button:horizontal:start:decrement {
|
|
width: 14px;
|
|
border-right-width: 0;
|
|
background-position: 2px 3px, 0 0;
|
|
}
|
|
|
|
:not(.single)::-webkit-scrollbar-button:double-button:horizontal:start:increment,
|
|
.double-start::-webkit-scrollbar-button:horizontal:start:increment,
|
|
.double-both::-webkit-scrollbar-button:horizontal:start:increment {
|
|
background-position: 3px 3px, 0 0;
|
|
}
|
|
|
|
:not(.single)::-webkit-scrollbar-button:double-button:horizontal:end:decrement,
|
|
.double-end::-webkit-scrollbar-button:horizontal:end:decrement,
|
|
.double-both::-webkit-scrollbar-button:horizontal:end:decrement {
|
|
background-position: 7px 3px, 0 0;
|
|
}
|
|
|
|
:not(.single)::-webkit-scrollbar-button:double-button:horizontal:end:increment,
|
|
.double-end::-webkit-scrollbar-button:horizontal:end:increment,
|
|
.double-both::-webkit-scrollbar-button:horizontal:end:increment {
|
|
width: 14px;
|
|
border-left-width: 0;
|
|
background-position: 3px 3px, 0 0;
|
|
}
|
|
|
|
::-webkit-scrollbar-button:horizontal:end:increment:corner-present {
|
|
border-right-width: 0;
|
|
width: 19px;
|
|
}
|
|
|
|
:not(.single)::-webkit-scrollbar-button:double-button:horizontal:end:increment:corner-present,
|
|
.double-end::-webkit-scrollbar-button:horizontal:end:increment:corner-present,
|
|
.double-both::-webkit-scrollbar-button:horizontal:end:increment:corner-present {
|
|
width: 13px;
|
|
}
|
|
|
|
/* Vertical Scrollbar Styles */
|
|
|
|
::-webkit-scrollbar:vertical {
|
|
-webkit-border-image: url(resources/vertical-button.png) 2 0 2 0;
|
|
border-color: transparent;
|
|
border-width: 2px 0;
|
|
background-image: url(resources/vertical-button-background.png);
|
|
background-repeat: repeat-y;
|
|
}
|
|
|
|
::-webkit-scrollbar:vertical:corner-present {
|
|
border-bottom-width: 0;
|
|
}
|
|
|
|
::-webkit-scrollbar-track:vertical:disabled:corner-present {
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
::-webkit-scrollbar:vertical:window-inactive {
|
|
-webkit-border-image: url(resources/vertical-button-inactive.png) 2 0 2 0;
|
|
background-image: url(resources/vertical-button-background-inactive.png);
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:vertical {
|
|
-webkit-border-image: url(resources/vertical-thumb.png) 13 0 13 0;
|
|
border-color: transparent;
|
|
border-width: 13px 0;
|
|
min-height: 20px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:vertical:hover {
|
|
-webkit-border-image: url(resources/vertical-thumb-hover.png) 13 0 13 0;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:vertical:active {
|
|
-webkit-border-image: url(resources/vertical-thumb-active.png) 13 0 13 0;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:vertical:window-inactive {
|
|
-webkit-border-image: url(resources/vertical-thumb-inactive.png) 13 0 13 0;
|
|
}
|
|
|
|
::-webkit-scrollbar-track-piece:vertical:start:no-button,
|
|
.double-end::-webkit-scrollbar-track-piece:vertical:start,
|
|
.none::-webkit-scrollbar-track-piece:vertical:start {
|
|
margin-top: 6px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track-piece:vertical:end:no-button,
|
|
.double-start::-webkit-scrollbar-track-piece:vertical:end,
|
|
.none::-webkit-scrollbar-track-piece:vertical:end {
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track-piece:vertical:end:no-button:corner-present,
|
|
.double-start::-webkit-scrollbar-track-piece:vertical:end:corner-present,
|
|
.none::-webkit-scrollbar-track-piece:vertical:end:corner-present {
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
:not(.none):not(.double-end)::-webkit-scrollbar-track-piece:vertical:start:single-button,
|
|
:not(.none):not(.double-end)::-webkit-scrollbar-track-piece:vertical:start:double-button,
|
|
.single::-webkit-scrollbar-track-piece:vertical:start,
|
|
.double-start::-webkit-scrollbar-track-piece:vertical:start,
|
|
.double-both::-webkit-scrollbar-track-piece:vertical:start {
|
|
margin-top: -6px;
|
|
}
|
|
|
|
:not(.none):not(.double-start)::-webkit-scrollbar-track-piece:vertical:end:single-button,
|
|
:not(.none):not(.double-start)::-webkit-scrollbar-track-piece:vertical:end:double-button,
|
|
.single::-webkit-scrollbar-track-piece:vertical:end,
|
|
.double-end::-webkit-scrollbar-track-piece:vertical:end,
|
|
.double-both::-webkit-scrollbar-track-piece:vertical:end {
|
|
margin-bottom: -6px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track:vertical:disabled {
|
|
-webkit-border-image: url(resources/vertical-track-disabled.png) 13 0 13 0;
|
|
border-color: transparent;
|
|
border-width: 13px 0;
|
|
}
|
|
|
|
::-webkit-scrollbar-track-piece:vertical:decrement {
|
|
-webkit-border-image: url(resources/vertical-track.png) 13 0 13 0;
|
|
border-color: transparent;
|
|
border-width: 13px 0 0 0;
|
|
}
|
|
|
|
::-webkit-scrollbar-track-piece:vertical:decrement:hover {
|
|
-webkit-border-image: url(resources/vertical-track-hover.png) 13 0 13 0;
|
|
}
|
|
|
|
::-webkit-scrollbar-track-piece:vertical:decrement:active {
|
|
-webkit-border-image: url(resources/vertical-track-active.png) 13 0 13 0;
|
|
}
|
|
|
|
::-webkit-scrollbar-track-piece:vertical:increment {
|
|
-webkit-border-image: url(resources/vertical-track.png) 13 0 13 0;
|
|
border-color: transparent;
|
|
border-width: 0 0 13px 0;
|
|
}
|
|
|
|
::-webkit-scrollbar-track-piece:vertical:increment:hover {
|
|
-webkit-border-image: url(resources/vertical-track-hover.png) 13 0 13 0;
|
|
}
|
|
|
|
::-webkit-scrollbar-track-piece:vertical:increment:active {
|
|
-webkit-border-image: url(resources/vertical-track-active.png) 13 0 13 0;
|
|
}
|
|
|
|
::-webkit-scrollbar-button:vertical {
|
|
height: 20px;
|
|
-webkit-border-image: url(resources/vertical-button.png) 2 0 2 0;
|
|
border-color: transparent;
|
|
border-width: 2px 0;
|
|
}
|
|
|
|
::-webkit-scrollbar-button:vertical:decrement {
|
|
background-image: url(resources/vertical-decrement-arrow.png), url(resources/vertical-button-background.png);
|
|
background-repeat: no-repeat, repeat-y;
|
|
background-position: 3px 3px, 0 0;
|
|
}
|
|
|
|
::-webkit-scrollbar-button:vertical:decrement:hover {
|
|
-webkit-border-image: url(resources/vertical-button-hover.png) 2 0 2 0;
|
|
background-image: url(resources/vertical-decrement-arrow.png), url(resources/vertical-button-background-hover.png);
|
|
}
|
|
|
|
::-webkit-scrollbar-button:vertical:decrement:active {
|
|
-webkit-border-image: url(resources/vertical-button-active.png) 2 0 2 0;
|
|
background-image: url(resources/vertical-decrement-arrow.png), url(resources/vertical-button-background-active.png);
|
|
}
|
|
|
|
::-webkit-scrollbar-button:vertical:decrement:window-inactive {
|
|
-webkit-border-image: url(resources/vertical-button-inactive.png) 2 0 2 0;
|
|
background-image: url(resources/vertical-decrement-arrow.png), url(resources/vertical-button-background-inactive.png);
|
|
}
|
|
|
|
::-webkit-scrollbar-button:vertical:increment {
|
|
background-image: url(resources/vertical-increment-arrow.png), url(resources/vertical-button-background.png);
|
|
background-repeat: no-repeat, repeat-y;
|
|
background-position: 3px 8px, 0 0;
|
|
}
|
|
|
|
::-webkit-scrollbar-button:vertical:increment:hover {
|
|
-webkit-border-image: url(resources/vertical-button-hover.png) 2 0 2 0;
|
|
background-image: url(resources/vertical-increment-arrow.png), url(resources/vertical-button-background-hover.png);
|
|
}
|
|
|
|
::-webkit-scrollbar-button:vertical:increment:active {
|
|
-webkit-border-image: url(resources/vertical-button-active.png) 2 0 2 0;
|
|
background-image: url(resources/vertical-increment-arrow.png), url(resources/vertical-button-background-active.png);
|
|
}
|
|
|
|
::-webkit-scrollbar-button:vertical:increment:window-inactive {
|
|
-webkit-border-image: url(resources/vertical-button-inactive.png) 2 0 2 0;
|
|
background-image: url(resources/vertical-increment-arrow.png), url(resources/vertical-button-background-inactive.png);
|
|
}
|
|
|
|
:not(.single)::-webkit-scrollbar-button:double-button:vertical:start:decrement,
|
|
.double-start::-webkit-scrollbar-button:vertical:start:decrement,
|
|
.double-both::-webkit-scrollbar-button:vertical:start:decrement {
|
|
height: 14px;
|
|
border-bottom-width: 0;
|
|
background-position: 3px 3px, 0 0;
|
|
}
|
|
|
|
:not(.single)::-webkit-scrollbar-button:double-button:vertical:start:increment,
|
|
.double-start::-webkit-scrollbar-button:vertical:start:increment,
|
|
.double-both::-webkit-scrollbar-button:vertical:start:increment {
|
|
background-position: 3px 4px, 0 0;
|
|
}
|
|
|
|
:not(.single)::-webkit-scrollbar-button:double-button:vertical:end:decrement,
|
|
.double-end::-webkit-scrollbar-button:vertical:end:decrement,
|
|
.double-both::-webkit-scrollbar-button:vertical:end:decrement {
|
|
background-position: 3px 8px, 0 0;
|
|
}
|
|
|
|
:not(.single)::-webkit-scrollbar-button:double-button:vertical:end:increment,
|
|
.double-end::-webkit-scrollbar-button:vertical:end:increment,
|
|
.double-both::-webkit-scrollbar-button:vertical:end:increment {
|
|
height: 14px;
|
|
border-top-width: 0;
|
|
background-position: 3px 4px, 0 0;
|
|
}
|
|
|
|
::-webkit-scrollbar-button:vertical:end:increment:corner-present {
|
|
border-bottom-width: 0;
|
|
height: 19px;
|
|
}
|
|
|
|
:not(.single)::-webkit-scrollbar-button:double-button:vertical:end:increment:corner-present,
|
|
.double-end::-webkit-scrollbar-button:vertical:end:increment:corner-present,
|
|
.double-both::-webkit-scrollbar-button:vertical:end:increment:corner-present {
|
|
height: 13px;
|
|
}
|
|
|
|
/* Forced Scrollbar Mode Styles */
|
|
|
|
.single::-webkit-scrollbar-button:start:decrement,
|
|
.single::-webkit-scrollbar-button:end:increment {
|
|
display: block;
|
|
}
|
|
|
|
.single::-webkit-scrollbar-button:start:increment,
|
|
.single::-webkit-scrollbar-button:end:decrement {
|
|
display: none;
|
|
}
|
|
|
|
.double-end::-webkit-scrollbar-button:start {
|
|
display: none;
|
|
}
|
|
|
|
.double-end::-webkit-scrollbar-button:end {
|
|
display: block;
|
|
}
|
|
|
|
.double-start::-webkit-scrollbar-button:start {
|
|
display: block;
|
|
}
|
|
|
|
.double-start::-webkit-scrollbar-button:end {
|
|
display: none;
|
|
}
|
|
|
|
.double-both::-webkit-scrollbar-button {
|
|
display: block;
|
|
}
|
|
|
|
.none::-webkit-scrollbar-button {
|
|
display: none;
|
|
}
|
|
</style>
|
|
<script>
|
|
/* Preload the scrollbar images to prevent flickering when changing states. */
|
|
(new Image()).src = "resources/corner-inactive.png";
|
|
(new Image()).src = "resources/corner.png";
|
|
(new Image()).src = "resources/horizontal-button-active.png";
|
|
(new Image()).src = "resources/horizontal-button-background-active.png";
|
|
(new Image()).src = "resources/horizontal-button-background-hover.png";
|
|
(new Image()).src = "resources/horizontal-button-background-inactive.png";
|
|
(new Image()).src = "resources/horizontal-button-background.png";
|
|
(new Image()).src = "resources/horizontal-button-hover.png";
|
|
(new Image()).src = "resources/horizontal-button-inactive.png";
|
|
(new Image()).src = "resources/horizontal-button.png";
|
|
(new Image()).src = "resources/horizontal-decrement-arrow.png";
|
|
(new Image()).src = "resources/horizontal-increment-arrow.png";
|
|
(new Image()).src = "resources/horizontal-thumb-active.png";
|
|
(new Image()).src = "resources/horizontal-thumb-hover.png";
|
|
(new Image()).src = "resources/horizontal-thumb-inactive.png";
|
|
(new Image()).src = "resources/horizontal-thumb.png";
|
|
(new Image()).src = "resources/horizontal-track-active.png";
|
|
(new Image()).src = "resources/horizontal-track-disabled.png";
|
|
(new Image()).src = "resources/horizontal-track-hover.png";
|
|
(new Image()).src = "resources/horizontal-track.png";
|
|
(new Image()).src = "resources/resizer-inactive.png";
|
|
(new Image()).src = "resources/resizer.png";
|
|
(new Image()).src = "resources/vertical-button-active.png";
|
|
(new Image()).src = "resources/vertical-button-background-active.png";
|
|
(new Image()).src = "resources/vertical-button-background-hover.png";
|
|
(new Image()).src = "resources/vertical-button-background-inactive.png";
|
|
(new Image()).src = "resources/vertical-button-background.png";
|
|
(new Image()).src = "resources/vertical-button-hover.png";
|
|
(new Image()).src = "resources/vertical-button-inactive.png";
|
|
(new Image()).src = "resources/vertical-button.png";
|
|
(new Image()).src = "resources/vertical-decrement-arrow.png";
|
|
(new Image()).src = "resources/vertical-increment-arrow.png";
|
|
(new Image()).src = "resources/vertical-thumb-active.png";
|
|
(new Image()).src = "resources/vertical-thumb-hover.png";
|
|
(new Image()).src = "resources/vertical-thumb-inactive.png";
|
|
(new Image()).src = "resources/vertical-thumb.png";
|
|
(new Image()).src = "resources/vertical-track-active.png";
|
|
(new Image()).src = "resources/vertical-track-disabled.png";
|
|
(new Image()).src = "resources/vertical-track-hover.png";
|
|
(new Image()).src = "resources/vertical-track.png";
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<select size=4 >
|
|
<option>One
|
|
<option>Two
|
|
<option>Three
|
|
<option>Four
|
|
<option>Five
|
|
</select>
|
|
|
|
<select size=4 class="single">
|
|
<option>One
|
|
<option>Two
|
|
<option>Three
|
|
<option>Four
|
|
<option>Five
|
|
</select>
|
|
|
|
<select size=4 class="double-end">
|
|
<option>One
|
|
<option>Two
|
|
<option>Three
|
|
<option>Four
|
|
<option>Five
|
|
</select>
|
|
|
|
<select size=4 class="double-start">
|
|
<option>One
|
|
<option>Two
|
|
<option>Three
|
|
<option>Four
|
|
<option>Five
|
|
</select>
|
|
|
|
<select size=4 class="double-both">
|
|
<option>One
|
|
<option>Two
|
|
<option>Three
|
|
<option>Four
|
|
<option>Five
|
|
</select>
|
|
|
|
<select size=4 class="none">
|
|
<option>One
|
|
<option>Two
|
|
<option>Three
|
|
<option>Four
|
|
<option>Five
|
|
</select>
|
|
|
|
<select size=4>
|
|
<option>One
|
|
<option>Two
|
|
</select>
|