Stylet Scrollbar: Color

Example for "CSS Scrollbars Level 1"-Property scrollbar-color

by Sebastian

HTML

<div class="fixedheight">
  <p class="scrollable">Please use Firefox Developer Edition. In other Versions of Firefox the feature is deaktivated. Other Browsers don't support it at all.</p>
</div>

<div class="fixedheight" tabindex="1">
  <ul class="scrollable">
    <li><a href="https://drafts.csswg.org/css-scrollbars-1/" target="_blank">CSS Scrollbars Module Level 1</a></li>
    <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color" target="_blank"><abbr title="Mozilla Developer Network">MDN</abbr>: scrollbar-color</a></li>
    <li><a href="https://caniuse.com/#feat=mdn-css_properties_scrollbar-color" target="_blank">Can I use: scrollbar-color</a></li>
  </ul>
</div>

CSS

* {
 box-sizing: border-box; 
}

body {
  background-color: lightgreen;
  margin-right: 5em;
}

.fixedheight {  
  scrollbar-color: green #ffff00;

  height: 40vh;
  background-color: #dddd00;
  margin: 0 0 1em 0;
  padding: 1em;
  overflow: auto;
}

.fixedheight:hover {
  scrollbar-color: blue lightblue;
}

.fixedheight:focus {
  scrollbar-color: red orange;
}

.fixedheight:active {
  scrollbar-color: #ffaa00 green;
}

.scrollable {
  min-height: 120vh;
  background-color: #dddd00;
}

a {
  color: #ff0000;
}