I want to know how I can change the style of the scroll bar of a browser window using CSS. I want to change it's color and width so that I can make the webpage look more attractive and comforting for users. Can I do this with CSS or should I use any other languages to do that?
I would also like to know whether styling scroll bar of a browser window affects page load speed and smoothness since I have seen websites with custom scroll bars which lags while scrolling.
I want to change the following
1. Width
2. Color of scroll bar
3. Color of scroll bar background
Here is a sample page with long enough to display a scroll bar. You may show me how to add the effect on the code below.
Sample structure code below:
HTML:
<html>
<head>
<title>
Sample Page
</title>
</head>
<body>
<div class="main">
</div>
</body>
</html>
CSS:
body{
background:#C0C0C0;
}
.main{
height:1200px;
width:1000px;
}
Also try to include the code which works with all browsers like Google Chrome, Firefox and especially IE
You can design the scroll bar easily with CSS.
body{
background:#C0C0C0;
}
.main{
height:1200px;
width:1000px;}
body::-webkit-scrollbar {
width: 12px;
}
body::-webkit-scrollbar-track {
background:green;
border-radius: 20px;
}
body::-webkit-scrollbar-thumb {
background-color: red;
border-radius: 20px;
}
for more information you can refer here. : https://www.webkit.org/blog/363/styling-scrollbars/
Got it. The CSS for chrome is given above and for IE IS given below
CSS:
body{
scrollbar-face-color: #EEC800;
scrollbar-shadow-color: #006cb4;
scrollbar-highlight-color:#006cb4;
scrollbar-3dlight-color: #006cb4;
scrollbar-darkshadow-color: #006cb4;
scrollbar-track-color: #006cb4;
scrollbar-arrow-color: #C1C1D1;
}
Related
Hi everyone.
I'm currently working on a website for my company, and right now I'm facing a problem with the navigation menu, specifically on mobile devices, or should I say, mobile browsers(most of them).
The hamburger icon is clickable when the browser's search bar is expanded, but becomes irresponsive when scrolling down(as the search bar becomes shrank).
It does work however on Chrome browser, as it doesn't shrink the search bar, but any other browser that I have tried refuses to do so. (Safari, Firefox, Samsung Browser, etc.)
I'm not sure how can that affects the hamburger menu, as it works perfectly on Chrome/Safari with Inspect element on mobile modes.
Here is my website (still work in progress)
From my current testing, I suspect your navigation pop up menu is slightly too big to pop up in Mozila Firefox default mobile size. If I flip the mobile size to landscape, you will be able to see the responsive of your navigation menu.
I will suggest you to try make the navigation menu to be smaller in width in your css code which will solve your issue with minimal editing.
Again just suggesting only this may not be the best solution but I personally feel that it works.
Regards,
JJSIMCYBERTECH.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<div class="nav">
<h1>(Website Name)</h1>
<input type="search" class="searchbox">
<button class="btn">(Element)</button>
<button class="btn">(Element)</button>
<button class="btn">(Element)</button>
<button class="btn">(Element)</button>
</div>
<style>
.nav{
background-color: lightgreen;
border: 2px solid white;
/* choose your color */
color: red;
}
.searchbox{
background-color: gray;
width: 300px;
height: 35px;
color: white;
}
.btn{
border: none;
background-color: #184a26;
}
.btn:hover{
padding: 5px;
}
</style>
</body>
</html>
I'm a new web developer, trying to add the latest Recatpcha to a website with a dark background. It displays with white space on some edges - a recent bug that is also being discussed in the Recaptcha Google group. I'm trying to develop a workaround until they fix it. Recaptcha is displayed as an iframe - so it should be configurable - but none of the properties visible in the DOM looks like "background". How do you force the iframe background to be transparent?
My code is here:
<!DOCTYPE HTML>
<head>
<style>
body {
background-color: rgb(30, 30, 40);
}
</style>
<script src='https://www.google.com/recaptcha/api.js?hl=en'></script>
</head>
<body>
<div class="g-recaptcha" data-theme="dark" data-sitekey="6LcZuQwTAAAAAA-qE3415DMsfeGdeQ6WWlzm4Lqz"></div>
</body>
</html>
Thanks so much!
Josh
Quick fix:
body {
background-color: rgb(30, 30, 40);
}
.g-recaptcha {
overflow:hidden;
width:298px;
height:74px;
}
iframe {
margin:-1px 0px 0px -2px;
}
Demo: http://jsfiddle.net/76rkfb2w/
As #CookieMan sad, iframe content can't be styled, but, holder of iframe, and iframe box it self - can. So, this should work on dark background...
i want to apply css for scroll bar in internet explorer:
i had used below css for the just a particular scroll bar
.ui-menu {
scrollbar-track-color: #C0C0C0;
scrollbar-base-color: #797979;
}
even in that i want to remove scroll bar arrows....which i couldn't..
i did this for google chrome and safari using below css
::-webkit-scrollbar {
height: 12px;
width: 18px;
background: #C0C0C0;
}
::-webkit-scrollbar-thumb {
background: #797979;
}
it worked fine ..............
so my requirement is i want remove the arrows and display only track and thumb for scroll bar in IE......globalise for whole site ..........
atleast if not possible i want that have to be worked for particular scroll bar on a page in IE..........
any work around plz...............
unfortunately, This feature is not supported by IE (applying css to scrollbars)
You can change colors of scrollbars in IE but as far as I see there is no style for hiding arrows:
https://msdn.microsoft.com/en-us/library/hh772048(v=vs.85).aspx
So I am trying to develop a simple mobile website. It will go off a QR code to the page linked below. The problem is when I view it on my android phone, or apple phone it adds a huge width. Any suggestions would be great. Here's the link to the live version: http://www.trileafweb.com/promotion/index.html
Here's the HTML/CSS
Promotion
<style>
html,body
{
width: 400px;
height: 200px;
}
h1{color:#00a94f;
text-align:center;}
p{
font-weight:bold;
font-size: 14;
text-align:center;
font-family:Arial;}
img{
position:relative;
height:100px;
width:200px;
padding-left:100px;}
#coupon{
padding-top:15px;
position:relative;
border: 3px dashed;
width: 400px;
height:200px;
border-radius:5px;}
</style>
</head>
<body>
<div id="coupon">
<h1>Promotion</h1>
<p>Promotion Texts</p>
<p>Coupon Code: <span style="color:red; font-size:24;">xxx-xxx</span></p>
</div>
</body>
Are you including a meta tag telling the mobile browsers that you understand how their viewports work? Something like this:
<meta name="viewport" content="width=device-width" />
More information about why this is necessary:
If you think about it logically, it seems to make sense: mobile Safari took a look at the page and assumed it was a document designed for the desktop, which is true of the vast majority of websites. So it gave the website a width of 980 pixels and presented it zoomed out. Which is why we can’t read anything until we zoom into the page....
But this is no good! What we need to do is tell the browser that this webpage is optimized for mobile. And this is where the viewport metatag comes into the picture.
Is it possible to increase the width of a scrollbar on a <div> element placed inside the <body>?
I am not talking about the default scrollbar on the browser itself, this page runs in full screen mode and because the browser scrollbar never comes into picture, the inner <div> element has its own scrollbar.
This can be done in WebKit-based browsers (such as Chrome and Safari) with only CSS:
::-webkit-scrollbar {
width: 2em;
height: 2em
}
::-webkit-scrollbar-button {
background: #ccc
}
::-webkit-scrollbar-track-piece {
background: #888
}
::-webkit-scrollbar-thumb {
background: #eee
}
JSFiddle Demo
References:
Custom Scrollbars in WebKit | CSS-Tricks
WebKit scrollbar demo from CSS-Tricks
15 Different scrollbar configurations
If you are talking about the scrollbar that automatically appears on a div with overflow: scroll (or auto), then no, that's still a native scrollbar rendered by the browser using normal OS widgets, and not something that can be styled(*).
Whilst you can replace it with a proxy made out of stylable divs and JavaScript as suggested by Matt, I wouldn't recommend it for the general case. Script-driven scrollbars never quite behave exactly the same as real OS scrollbars, causing usability and accessibility problems.
(*: Except for the IE colouring styles, which I wouldn't really recommend either. Apart from being IE-only, using them forces IE to fall back from using nice scrollbar images from the current Windows theme to ugly old Win95-style scrollbars.)
You can stablish specific toolbar for div
div::-webkit-scrollbar {
width: 12px;
}
div::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
}
see demo in jsfiddle.net
This sets the scrollbar width:
::-webkit-scrollbar {
width: 8px; // for vertical scroll bar
height: 8px; // for horizontal scroll bar
}
// for Firefox add this class as well
.thin_scroll{
scrollbar-width: thin; // auto | thin | none | <length>;
}
Yes.
If the scrollbar is not the browser scrollbar, then it will be built of regular HTML elements (probably divs and spans) and can thus be styled (or will be Flash, Java, etc and can be customized as per those environments).
The specifics depend on the DOM structure used.
My experience with trying to use CSS to modify the scroll bars is don't. Only IE will let you do this.