| <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> |
