Hello!
I put this into my css file for changing the look of the scrollbar.
It works in nearly every browser as intended, but not in firefox:
::-webkit-scrollbar{
width: 10px;
background-color: #f1f1f1;
}
::-webkit-scrollbar-thumb{
background-color: #353b48;
}
What do I need to make in work in Firefox too? ^^
The ::-webkit-scrollbar selector is not supported in Firefox:
https://caniuse.com/?search=%3A%3A-webkit-scrollbar
You can still customize the scrollbar though! See these:
Custom CSS Scrollbar for Firefox
Custom CSS Scrollbar for Firefox
Firefox doesn't support "-webkit-scrollbar", but it still supports a custom scrollbar.
scrollbar-color: #f1f1f1 white;
scrollbar-width: thin;
Just add that to your code.
Source
Related
This is the CSS I'm using to style a vertical scroll bar.
overflow-y: scroll;
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: #COLOR_1;
border-radius: 2px;
}
::-webkit-scrollbar-thumb {
background: #COLOR_2;
border-radius: 2px;
}
::-webkit-scrollbar-thumb:hover {
background: #COLOR_2;
}
scrollbar-color: ${props => "#COLOR_2" + " " + "#COLOR_1"};
scrollbar-width: thin;
This is the result I expect (works on Chrome):
This is what I'm getting on Firefox:
How to get rid of the black line?
It comes from the top and goes all the way to the bottom.
I experienced the same thing and inspired by your comment, I did some more digging.
This appears to be a bug within Firefox. Screenshots are attached to that bug showing a similar black outline around the scrollbar as you experienced when setting scrollbar-color. It appears like it's an issue on Windows Firefox only.
A fix was pushed and appears to be slated to be released in Firefox 85.
There was a comment containing a workaround: "If you set widget.disable-native-theme-for-content=true in about:config and refresh" that the OP said fixed it, but if your app is public-facing will not be much help. I tried this workaround for my site and it did not work perfectly, it removed the black outline but added a few colored pixels at the top and bottom of the scrollbar (I believe it's related to up/down buttons which are hidden by scrollbar-width: thin)
Another workaround is to not set scrollbar-color and the black outline should go away, although that is not the ideal solution when Chrome works correctly when changing scrollbar color to match the theme of your site.
I have a custom scrollbar that appears in Chromium and Safari, but it will not show up in Chrome... makes no sense! Does anyone know what may be causing this?
EDIT may also be worth noting that the scrollbar USED to appear in Chrome just fine... maybe some new Chrome update broke it?
Here is a link to the site (scrollbar is at the bottom): www.missingnewyork.com/store
And here is the CSS for the scrollbar:
::-webkit-scrollbar {
height: 1%;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: white;
}
::-webkit-scrollbar-thumb:hover {
background: #ffffff;
}
That's how it should look? (smaller maybe)
If that is the case it's probably because of the height: 1%;. CSS doesn't know very well what is the % for heights, it's better to not use it. Try to use vh of some fixed value.
On Edge Browser, I couldn't able to change input placeholder color.
:-ms-input-placeholder is not working but works fine on IE 10 & IE 11.
input:-ms-input-placeholder {
font-style:italic;
color: red;
background-color: yellow;
}
is there anyway to make it work using CSS?
From CanIUse.com
::-webkit-input-placeholder for (Chrome/Safari/Opera)
:-ms-input-placeholder for IE.
::-ms-input-placeholder for Edge (also supports webkit prefix)
Note the double colon syntax
I want to second #ken's comment on #Paulie_D's answer, above.
This works:
input[type="text"]::-ms-input-placeholder { color: #000; }
This doesn't:
input[type="text"]::placeholder, input[type="text"]::-ms-input-placeholder { color: #000; }
I'm not sure why, but it definitely appears that the -ms-input-placeholder pseudo-element only works if it's separate from other directives.
For the current version of the Microsoft Edge browser, placeholder doesn't work correctly. Take a look this issue Microsoft Edge placeholder bug. If placeholder is invisible, try to remove position: relative and :-webkit-input-placeholder opacity.
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
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.