I have a custom scroll bar accomplished by the code as shown here:
::selection {
background: #333;
color: #FFF;
}
::-webkit-scrollbar {
width: 9px;
}
::-webkit-scrollbar-track {
background:#eee;
border: thin solid lightgray;
box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1) inset;
}
::-webkit-scrollbar-thumb {
background:#999;
border: thin solid gray;
}
It works fine on Chrome, Firefox... but Internet Explorer it does not work
What should I add?
The CSS specified will only apply a custom scrollbar on a webkit browser such as Chrome and Safari. Internet Explorer only supports a limited amount of scrollbar customisation. See the MSDN reference and this IE scrollbar CSS generator.
Also, Firefox doesn't support custom scrollbars (bug report), so I'm not sure how your CSS is working in Firefox - it isn't for me.
If you want, you can use JavaScript-based jScrollPane to implement custom scrollbars in all browsers, but be warned, many people hate the user experience on JavaScript scrollbars, myself included.
Related
I want to use the same scroll bar as I have implemented in safari and chrome but I am unable to see it on Firefox Browser.
How can I do this? I have referred this question of Firefox bug
https://bugzilla.mozilla.org/show_bug.cgi?id=77790
but was unable to trace what is wrong with my CSS, Please suggest me a way to do it.
What I have done for safari and Chrome is as follows :
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;}
::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);}
Thanks a lot for your helps.
You are only using the webkit rendering engine (Chrome and Safari)
Sadly though currently there is no -webkit-scrollbar for the -moz rendering engine.
Hope this helps
Difference between rendering engines
Custom CSS Scrollbar
Cheers,
Demetry
I am trying to design the scroll bar, for that I have given like
::-webkit-scrollbar {
width: 8px;
background-color: rgba(0,0,0,0);
-webkit-border-radius: 100px;
}
::-webkit-scrollbar:hover {
background-color: rgba(0, 0, 0, 0.09);
}
::-webkit-scrollbar-thumb:vertical {
background: rgba(0,0,0,0.61);
-webkit-border-radius: 100px;
}
::-webkit-scrollbar-thumb:vertical:active {
background: rgba(0,0,0,0.61); /* Some darker color when you click it */
-webkit-border-radius: 100px;
}
This is working fine with Chrome and Safari, I want the same css apply to Firefox; how can I get that?
Using CSS to alter the appearance of the scrollbars is not supported. It alters the appearance of the browser UI elements and for that reason its doubtful it will ever be supported.
You may hide the scrolbar in mozila,
CSS:
#namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
scrollbar{
-moz-appearance: none !important;
}
The article in the Mozilla support forum discussed about "How to hide or disable vertical and horizontal scrollbars?" You can try this link to mozilla support
http://support.mozilla.org/en-US/questions/957337
I am trying to get linear gradients to work with CSS3Pie (v1.0) and IE9.
Strangely the demo works on the CSS3Pie site with IE9, but using the same CSS used on the demo does not work on my site. It works with IE8, so I know that PIE is working and in the correct location (to test, it stops working if I comment out behavior: url(/css/PIE.htc);).
Here is the CSS I am using:
.test {
padding: 20px;
text-align: center;
width: 200px;
height:100px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: #666 0px 2px 3px;
-moz-box-shadow: #666 0px 2px 3px;
box-shadow: #666 0px 2px 3px;
background: #FF7777;
position:relative;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#FF7777), to(#c40808));
background: -webkit-linear-gradient(#FF7777, #c40808);
background: -moz-linear-gradient(#FF7777, #c40808);
background: -ms-linear-gradient(#FF7777, #c40808);
background: -o-linear-gradient(#FF7777, #c40808);
background: linear-gradient(#FF7777, #c40808);
-pie-background: linear-gradient(#FF7777, #c40808);
behavior: url(/css/PIE.htc);
}
I'd prefer not to use IE filters, since the demo seems to work without them.
I've already read this question, but since the demo works, and this question is about a year old, and PIE is now on version 1.0 that I must be doing something wrong.
Any idea on where to go from here?
Failure in IE9 is usually due to an incorrect content-type header. Other IE versions have this issue as well but IE9 seems to be more strict about it. See http://css3pie.com/documentation/known-issues/#content-type for details.
I was having a big headache because even with the correct content-type header (text/x-component), the linear-gradient wasn't working on IE9.
Upgrading to PIE 2.0 solved the issue.
http://css3pie.com/2013/01/28/pie-2-0-beta-1-released
(Same awnser I gave in this question: linear-gradient using CSS3 PIE in IE9 not working, IE8 does)
Hi I'm using the next css code to style scroll bars in Safari and Chrome. And works really great but I´m facing the next issue, I would like te restore the default value, when I view the site on my ipad. I'm using #media css for achived this but, I don't know how to restore the defaults values.
#media screen and (min-width: 768px) and (max-width: 1024px) { }
/*Scroll bar nav*/
::-webkit-scrollbar {
width: 12px;
}
/* Track */
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
-webkit-border-radius: 10px;
border-radius: 10px;
background:#FFF;
}
/* Handle */
::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
background: rgba(204,204,204,0.8);
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
background: rgba(204,204,204,0.4);
}
UPDATE 2022
I answered this almost 10 years ago and seems like after 2021 this solution stop working, read the solution from #Volomike, it might get you where you want to.
I just realized you can set all the properties in auto; and will do the trick. This is a self answer but I guess someday someone can have the same question.
/*Scroll bar nav*/
::-webkit-scrollbar {
width: auto;
}
/* Track */
::-webkit-scrollbar-track {
-webkit-box-shadow: auto;
-webkit-border-radius: auto;
border-radius: auto;
background:auto;
}
/* Handle */
::-webkit-scrollbar-thumb {
-webkit-border-radius:auto;
border-radius:auto;
background:auto;
-webkit-box-shadow:auto;
}
::-webkit-scrollbar-thumb:window-inactive {
background: auto;
}
I don't know if exist another method.
-- UPDATE --
Look like you can also use the initial and unset value
//reverting all the values
::-webkit-scrollbar {
all:unset;
}
or apply to an specific one {width : unset} || {width : initial}
NOTE: Using unset will not work on IE11
Use the initial value or unset value for the properties you want to revert (depending on how exactly you want to revert them).
Both these values can be applied to all CSS properties.
example
::-webkit-scrollbar {
width: initial;
}
or
::-webkit-scrollbar {
width: unset;
}
If you want to revert all properties of a rule then you should use the all keyword
example
::-webkit-scrollbar-thumb {
all:unset;
}
Notice: No IE support for any of these as of yet.
Varying levels of support for each browser (see the linked docs for details)
I had trouble with this. I don't know what exactly triggers the latest Chrome to switch scrollbars on a desktop browser to overlay mode, but it was unnerving to me because it makes the page scroller look broken to an inexperienced user. The selected answer didn't seem to work in my version of Chrome on Lubuntu Linux 20.04.1, version 100.0.4896.127. So, over several hours, I painstakingly recreated the settings to Chrome's system defaults and yet something that works in both light and dark mode too. Note I'm only styling the BODY element's vertical scroller in this example, but you can adapt easily for horizontal scrollers as well as not just apply it to the BODY element.
BODY::-webkit-scrollbar
{
all:unset;
}
BODY::-webkit-scrollbar-button
{
display:block;
background-color:ButtonFace;
box-shadow:inset 0px 0px 0px 20px rgba(255,255,255,0.3);
height: auto;
width: initial;
background-position: center 5px;
background-size:9px 7px;
image-rendering: pixelated;
background-repeat:no-repeat;
}
BODY::-webkit-scrollbar-button:hover
{
box-shadow:inset 0px 0px 0px 20px rgba(128,128,128,0.5);
}
BODY::-webkit-scrollbar-button:active
{
box-shadow:inset 0px 0px 0px 20px rgba(128,128,128,0.7);
}
BODY::-webkit-scrollbar-button:vertical:start:increment,
BODY::-webkit-scrollbar-button:vertical:end:decrement
{
display:none;
}
BODY::-webkit-scrollbar-button:vertical:decrement
{
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='ButtonText'><polygon points='50,00 0,50 100,50'/></svg>");
}
BODY::-webkit-scrollbar-button:vertical:increment
{
background-position: center 6px;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='ButtonText'><polygon points='0,0 100,0 50,50'/></svg>");
}
BODY::-webkit-scrollbar-thumb
{
background-color:ButtonFace;
box-shadow:inset 0px 0px 0px 20px rgba(128,128,128,0.3);
border-left:2px solid rgba(255,255,255,0.3);
border-right:2px solid rgba(255,255,255,0.3);
}
BODY::-webkit-scrollbar-thumb:hover
{
box-shadow:inset 0px 0px 0px 20px rgba(128,128,128,0.5);
}
BODY::-webkit-scrollbar-thumb:active
{
box-shadow:inset 0px 0px 0px 20px rgba(128,128,128,0.7);
}
BODY::-webkit-scrollbar-track
{
background-color:ButtonFace;
box-shadow:inset 0px 0px 0px 20px rgba(255,255,255,0.3);
}
Extra Notes:
Using the ButtonFace and ButtonText colors, you can have the scrollbar react to light and dark mode. However, that doesn't give you the varying levels of light and dark you need on the control. You'd think perhaps you could use a filter:brightness(x); level or an opacity:x level to create your varying levels of light and dark on the control -- but those oddly don't work on these scrollbars. Instead, I found that that an inset box-shadow set on wide spread, and nothing else, with rgba colors, worked well.
I found that setting width:initial, plus height:auto, on the button alone was enough to set the width of the scrollbar control parts.
I got the triangle SVGs from here. Note that I changed the fill on those to ButtonText in order to make it work in browser dark and light modes.
Note that I used rgba(128,128,128,x) in some cases because starting from white or black with opacity created odd issues when switching light and dark modes, and so I chose the middle value with opacity to get around that.
The image-rendering:pixelated was very useful because otherwise the very tiny up and down triangle SVG icon would be antialiased so much that it would look too opaque. This allowed the SVG icon to maintain its darkness on light mode, and brightness on dark mode.
I filed this issue with the Chromium browser team to see if they can give us some reliable CSS to turn off overlay scrollbars on a given element, should we need that.
https://bugs.chromium.org/p/chromium/issues/detail?id=1333947
EDIT: Recently, I found that web server cache has something to do with the Google Chrome/Chromium/Edge Chromium browsers from somewhere around version 100+ at least here around 6/17/2022. When I turn on web server cache, any sub-page on a website going back to a previous page (as a regular relative link, not as a history.back(); call), will consistently show an overlay scrollbar instead of a fixed scrollbar. But if I force the page with an .htaccess rule that is a website cache buster, then the problem goes away and I see a scrollbar like normal.
As commenter vsync mentioned, once you've hid the scrollbar, if you add a new css rule to show the scrollbar, it doesn't work as expected.
Can be solved with JS
let styles = document.getElementsByTagName('style');
for(let i = 0; i < styles.length; i++) {
let style = styles[i];
let rules = style.sheet.cssRules;
for(let r = 0; r < rules.length; r++) {
let rule = rules[r];
if(rule.selectorText === '::-webkit-scrollbar') {
style.sheet.deleteRule(r);
}
}
}
Alright, so I'm trying to implement text-shadow across various browsers. I have IE6, IE7, FF, Chrome, and Opera all working... but IE8 wont' show any shadows unless it is in 'Compatibility View'.
I've looked at a number of 'solutions' via search / Google, but the shadow is still only appearing in 'Compatibility View'.
Any ideas on how to get it to show up without having to change modes?
Note: Using HTML5 Boilerplate and Modernizr.
edit: Added that I'm using Modernizr, and I clicked the wrong button in my tester. This isn't working in IE9 either, but I don't think it is related.
CSS:
#links li a {
font-size: 24px;
text-shadow: 0 3px 3px #102530, 0 3px 3px #102530;
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=90, Color='#102530')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=90, Color='#102530');
filter:DropShadow(Color=#102530, OffX=0, OffY=3);
zoom: 1;
}
HTML
<ul id="links">
<li><a href="#"/>Text</a></li>
</ul>
I tried Modernizer (also with heygrady's polyfill). I tried cssSandpaper. I tried CSS3PIE. But none of them displayed me a text-shadow in Internet Explorer 8 (CSS3PIE doesn't feature text-shadow). I also tried the double-markup method. But that really can't be it.
And then I found Whykiki's blog post and simply added filter: dropshadow(color=#000000, offx=2, offy=2); in combination with display: block;. And that's it. Some of you might try zoom: 1; instead of display: block; to activate it. filter: glow(color=#000000,strength=2); works, too. As you will see, the MS dropshadow doesn't come with blur. I can live with that.
h1 {
color: #fce934;
text-shadow: 2px 2px 2px #000000;
-moz-text-shadow: 2px 2px 2px #000000;
-webkit-text-shadow: 2px 2px 2px #000000;
filter: dropshadow(color=#000000, offx=2, offy=2);
display: block; /* that's the important part */
}
A website must not necessarily look the same in every browser. Plus MS filters are crap.
I would recommend to use Modernizer an apply a different solution for IE8.
It will save you from headaches :)