scrollbar style

<style> ::-webkit-scrollbar { width:16px } ::-webkit-scrollbar:horizontal { height:17px } ::-webkit-scrollbar-corner { background:#eee } ::-webkit-scrollbar-track:vertical { background:linear-gradient(90deg,#e5e5e5,#f0f0f0 20%) } ::-webkit-scrollbar-track:horizontal { background:linear-gradient(180deg,#e5e5e5,#f0f0f0 20%) } ::-webkit-scrollbar-thumb { border:1.5px solid #888; border-radius:3px; box-shadow:inset 0 -1px 1px #fff,inset 0 1px 1px #fff; background-color:#eee; } ::-webkit-scrollbar-thumb:vertical { background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAKCAIAAADpZ+PpAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAEnQAABJ0Ad5mH3gAAADrSURBVChTTc5LboJQGAXguyoCu4ERCzAGlRk7UOwGWIDh0s4M4kxb06RSq/jAB6AxJkJ4lTDrue3AnvyzP+fLId+/yfM8juP7PQmCCOf7B3e+ZD+O40RRVFW12VQUpd3r9U3T2m4OpKoqWZYNwzBZLEqfh0N7NnvfrPcEWlEUWZb9mWF4Ph6D0ylcLbfM5HkeJrhGA2hb15/QXnv+w7RYXsDatjOdvnmrHSnLEizMNE2v11sUXQBCnn98kbquBUGQJAlmq9WB2e3qg4HJdqKkaRql1HGc0WgMcDJ5dd0F24kediZJ8t/ELT69H+8py0CYSIO5AAAAAElFTkSuQmCC") no-repeat 50%,linear-gradient(90deg,#eee 45%,#ddd 0,#bbb) } ::-webkit-scrollbar-thumb:horizontal { background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAJCAYAAAALpr0TAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAEnQAABJ0Ad5mH3gAAADcSURBVChTNZBLqoUwEEQrURQUxZGCvy24ACfiityJi7tv8GauQoPxk5tquA2RQ9vVVYk6z9NZaxFFEe77htYazjk8z4MwDIVZ+rourOuKaZrwvi+WZcE8z1BKCbPPCjk4DAO2bRP1OI7wLiL6Mbd7J408z1GWpQwWRYGqqiQG+03TgMu0MacfUN4qANmn8UOv9MjW3sKaSm7iIdOSlziOQ3LScd93aPonSYK6riVLlmVo21aYfVqzND9pmqLrOlGT+76XbcxLZkb19/l3fEP+oF0cx8KMEASBsDEGX2/CgZCHkg+8AAAAAElFTkSuQmCC") no-repeat 50%,linear-gradient(180deg,#eee 45%,#ddd 0,#bbb) } ::-webkit-scrollbar-button:horizontal:end:increment, ::-webkit-scrollbar-button:horizontal:start:decrement, ::-webkit-scrollbar-button:vertical:end:increment, ::-webkit-scrollbar-button:vertical:start:decrement { display:block } ::-webkit-scrollbar-button:vertical { height:17px } ::-webkit-scrollbar-button:vertical:start { background:url(button-up.svg), linear-gradient(90deg,#e5e5e5,#f0f0f0 20%) } ::-webkit-scrollbar-button:vertical:end { background:url(button-down.svg), linear-gradient(90deg,#e5e5e5,#f0f0f0 20%) } ::-webkit-scrollbar-button:horizontal { width:16px } ::-webkit-scrollbar-button:horizontal:start { background:url(button-left.svg), linear-gradient(180deg,#e5e5e5,#f0f0f0 20%) } ::-webkit-scrollbar-button:horizontal:end { background:url(button-right.svg), linear-gradient(180deg,#e5e5e5,#f0f0f0 20%) } </style>