Scrollbars apple look-like

by NicosKaralis

HTML

<pre class='light'>
    article - nicosarticle - nicos<br />
    article - nicos    article - nicos<br />
    article - nicos    article - nicos<br />
    article - nicos    article - nicos<br />
    article - nicos    article - nicos<br />
</pre>

CSS

.light {
    outline: 1px solid #ddd;
    border-top: 1px solid #fff;
    padding: 10px;
    background: #f0f0f0;
}

pre { 
    width: 100px;
    height: 100px;
    background-color: white;
    padding: .5em;
    display: block;
    clear: both;
    margin: 1em 0;
    white-space: nowrap;
    border-bottom: 3px solid white;
    overflow:auto;
}

pre::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    padding: 18px;
    -webkit-border-radius: 1ex
}

pre::-webkit-scrollbar-thumb {
    background-color: rgba(053,057,071,0.3);
    padding: 8px;
    width: 6px;
    height: 6px;
    -webkit-border-radius: 1ex;
}

pre::-webkit-scrollbar-button:start:decrement,
pre::-webkit-scrollbar-button:end:increment {
    display: block;
    height: 10px
}

pre::-webkit-scrollbar-thumb:vertical,
pre::-webkit-scrollbar-thumb:horizontal {
    height: 3px;
    width: 3px;
    margin: 3px;
}

JavaScript

/* Scrollbars apple look-like */