How To Change The Color Of Scrollbars Using CSS ?

So you have made all of your template with two cool colors of your choice, added one of you favorite web font and now only one thing is annoying you that is your browser's scroll bar color.
And the question arising up in your mind is how can i change the scrollbar color.

Can i change the scrollbar color ?

... and the answer is yes you can, with newest CSS3 and -webkit- it is possible to change the scrollbar color,style and background.

How can i change the scrollbar color ?


1. For chrome and safari you can change the scrollbar colors using -
/* Chrome, Safari */
::-webkit-scrollbar {
width: 15px;
height: 15px;
}
::-webkit-scrollbar-track-piece  {
background-color: #C2D2E4;
}
::-webkit-scrollbar-thumb:vertical {
height: 30px;
background-color: #0A4C95;
}
2.But I have found another solution to this with adding some styles to it -

1. Rounded corners :

::-webkit-scrollbar {width: 6px; height: 4px; background: #ffffff; }
::-webkit-scrollbar-thumb { background-color: #000000; -webkit-border-radius: 3px; }

2. Square corners with border style :
::-webkit-scrollbar {width: 9px; height: 3px; background: #FFFFFF;}
::-webkit-scrollbar-thumb {background-color:#ffffff ; border: 1px solid black;}
Just add these styling rules to your css flile or add them in < style > tags and paste in head and this will work like magic.
So this way you can add amazing styles to your Blog or Website template and get rid of that old looking scrollbar.
If you have got any query regarding this post leave in the comments below.

Comments

Post a Comment

Popular posts from this blog

Show Full Post on Front Page of Ghost, Not Excerpt

Image
I love writing about the Ghost platform. Its simple and just focused on blogging and that's why I love this platform. Some bloggers like to show full posts on homepage instead of post excerpts . By default Ghost(with default theme) displays excerpts on homepage. However if you would like to show full posts and not excerpts on the front page on your blog there is an easy way to change from excerpts to full posts on Ghost Homepage. Show full posts on Ghost Homepage : Tutorial Its very easy if you have access to your ghost blog by ftp/sftp or have Ghost hosted on your computer. you just have to be able to edit the index.hbs file. First open the index.hbs file. Find the above code: < section class="post-excerpt" > < p>{{ excerpt }}… » < /section > Replace it with: < section class="post-content" > {{ content }} < /section > You are done now, just save and restart Ghost. Warning: If you are displaying too much pos
Read more

Video Blogger Templates

Image
Many bloggers aim to create video blogging websites. Blogger is best place to start for any company or individuals. Today we are sharing free seo optimized video blogger templates. Some of the templates are best for adding videos from YouTube, Vimeo and DailyMotion. VIDEO BLOGGER TEMPLATES 1.  BlogTube Professional Video Template BlogTube is a Professional Responsive Video Blogger Template designed for video sites, video blog video portal. This template will help you to setup a professional video site quickly. It is inspired by popular websites including YouTube, Vimeo and Dailymotion. No two opinions to say that it is the most powerful Video Blogger theme ever. It is fast, responsive, minimal and packed with tons of features required to set up a professional video site. 2.  Videoism Blogger Template. Videoism is a professional video hosting blogger template designed for video site and video blog portal. This template would help everyone in setting up a professiona
Read more

5 Beautiful Dark Blogger Templates

Image
Are you tired of looking at the default templates that Blogger provides? We decided to search for some of the different-looking beautiful dark Blogger templates and found these 5 cool dark blogger templates. Eclipse Dark theme that brings werewolves to mind. An enchanting template for the dark souls.Theme is designed beautifully with extra dark colors and glitter. Limax Another beautiful dark blogger template with striking colors. Butterfly Magic Another dark colors collection in this butterfly nagic blogger theme Xenon Xenon is a free dark blogger template adapted from WordPress with 2 columns, left sidebar and posts thumbnails. Cooperate Cooperate is a free blogger template adapted from WordPress with 2 columns, right sidebar, slideshow, social bookmarking icons, posts thumbnails, tabs, drop down menu and a background pattern. Excellent layout for blogs about any general topic. So we have given you 5 Cool Dark Blogger Templates, Now it;
Read more