45 lines
1.0 KiB
ReStructuredText
45 lines
1.0 KiB
ReStructuredText
|
Scrollbar Colors
|
||
|
|
################
|
||
|
|
:date: 2022-10-13 12:07
|
||
|
|
:author: tyrel
|
||
|
|
:category: Website
|
||
|
|
:tags: css
|
||
|
|
:slug: scrollbar-colors
|
||
|
|
:status: published
|
||
|
|
|
||
|
|
Was talking to someone about CSS Nostalgia and "back in my day" when scrollbar colors came up.
|
||
|
|
|
||
|
|
.. code-block:: css
|
||
|
|
|
||
|
|
/* For Chromium based browsers */
|
||
|
|
::-webkit-scrollbar {
|
||
|
|
background: #2A365F;
|
||
|
|
}
|
||
|
|
::-webkit-scrollbar-thumb {
|
||
|
|
background: #514763;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* For Firefox */
|
||
|
|
html {
|
||
|
|
scrollbar-color: #514763 #2A365F;
|
||
|
|
}
|
||
|
|
|
||
|
|
Firefox and Chrome have different selectors, so in order to support the majority of browsers, you need both.
|
||
|
|
|
||
|
|
.. figure:: {static}/images/2022/10/scrollbar-chrome.png
|
||
|
|
:alt: Chrome with a blue/purple scrollbar
|
||
|
|
:width: 940px
|
||
|
|
:height: 688px
|
||
|
|
|
||
|
|
Chrome with a blue/purple scrollbar
|
||
|
|
|
||
|
|
.. figure:: {static}/images/2022/10/scrollbar-safari.png
|
||
|
|
:alt: Safari with a blue/purple scrollbar
|
||
|
|
|
||
|
|
Safari with a blue/purple scrollbar
|
||
|
|
|
||
|
|
.. figure:: {static}/images/2022/10/scrollbar-firefox.png
|
||
|
|
:alt: Firefox with a blue/purple scrollbar
|
||
|
|
|
||
|
|
Firefox with a blue/purple scrollbar
|