HTML CSS examples for CSS Widget:Arrow
Adding arrows to scrollbar
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> ::-webkit-scrollbar {<!--from w w w . j a v a 2 s .c o m--> width:11px; height:11px; } ::-webkit-scrollbar-button { background-size:100%; height:11px; width:11px; -webkit-box-shadow:inset 2px 2px 3px Chartreuse; } ::-webkit-scrollbar-button:end { display:block; } ::-webkit-scrollbar-button:start { display:none; } ::-webkit-scrollbar-button:horizontal:increment { background-image:url(data:image/png; } ::-webkit-scrollbar-button:horizontal:decrement { background-image:url(data:image/png; } ::-webkit-scrollbar-button:vertical:increment { background-image:url(data:image/png; } ::-webkit-scrollbar-button:vertical:decrement { background-image:url(data:image/png; } ::-webkit-scrollbar-track { background:yellow; -webkit-box-shadow:inset 2px 2px 3px blue; } ::-webkit-scrollbar-thumb { background:pink; -webkit-box-shadow:inset 2px 2px 3px WhiteSmoke; border-radius:6px; } ::-webkit-scrollbar-thumb:hover { background:OrangeRed; } ::-webkit-scrollbar-thumb:active { background:grey; -webkit-box-shadow:inset 2px 2px 3px BlueViolet; } </style> </head> <body> test <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> </body> </html>