This question already has answers here:
Scrollbar color change in Firefox
(9 answers)
Closed 8 years ago.
i want to change my scrollbar design using css. i use this css but it only apply on chrome,
<style>
::-webkit-scrollbar {
width: 12px;
}
::-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);
}
</style>
tell me how can i change my scrollbar in firefox using css.
thanks in advance
If you want to change style of scrollbar cross-browser you have to use some (jQuery) plugin. I use this one http://areaaperta.com/nicescroll/demo.html it is cross-browser compatible and easy to implement.
Also great one is this http://jscrollpane.kelvinluck.com/#examples
And here you can find more http://www.jqueryrain.com/2012/07/jquery-scrollbar-plugin-examples/
If you want to change it in mozilla using CSS put -moz- intead of -webkit-, e.g:
-moz-scrollbar { width: 12px; }
-webkit- works for chrome and safari, -moz- for firefox, -o- for opera, and -ms- for IE.
It seems you have to put all 4 lines to make it work on every browser, e.g:
-webkit-scrollbar {width: 12px;}<br/>
-o-scrollbar {width: 12px;}<br/>
-moz-scrollbar {width: 12px;}<br/>
-ms-scrollbar {width: 12px;}<br/>
Related
I try to use box-shadow with css3, but it's not working on IE, works fine on chrome and firefox.
I know, on IE9 I must used box-shadow without moz or webkit prefix
I use an iFrame in my WebPage for login (Made for ERP login), And this iframe have a known bug, when you use html5 you can be redirected after login, That's why I must use <html> tag and not <!DOCTYPE html> (I've open a ticket for fix this bug)
If I use <!DOCTYPE html> my box-shadow work, but my iframe freeze.
If I use <html> My iFrame work fine but my box-shadow is not diplayed.
So, actually I must choose between design or functionality, but I'm pretty sure stackoveflow know an issue for that.
If you know a solution or a hack, it can be cool
Here my code : (work with <!DOCTYPE hml> but want the same effect with <html>)
#header-container{
-webkit-box-shadow:0 5px 8px rgba(0, 0, 0, 0.15);
-moz-box-shadow:0 5px 8px rgba(0, 0, 0, 0.15);
box-shadow:0 5px 8px rgba(0, 0, 0, 0.15);
}
The CSS3 box-shadow is a Candidate Recommendation.
It is method of displaying an inner or outer shadow effect to elements and it can be partially emulated in older IE versions using the non-standard shadow filter. Partial support in Safari, iOS Safari and Android Browser refers to missing inset and blur radius value support.
IE9 has no problem showing box-shadow except when shadowing a box within a table-cell (If the CSS of the table has its border-collapse property set to collapse, then the box-shadow is not applied. This is fixed in a future releases).
As mentioned earlier, IE6-8 requires Visual Filters to emulate CSS3 box-shadows without JavaScript. In order to illustrate this, I will show several different types of box-shadows below and show both the CSS3 syntax and the equivalent Visual Filter CSS recipe. Some of these recipes produce almost identical results, while others are rough equivalents.
Note that all these examples use a variation of Paul Irish’s Conditional CSS Pattern in order to create the IE-only rules. This involves replacing the <body> tag of the document with this HTML:
<!-- Extra white-space below is just to make it easier to read. :-) -->
<!--[if lt IE 7 ]> <body class="ie6"> <![endif]-->
<!--[if IE 7 ]> <body class="ie7"> <![endif]-->
<!--[if IE 8 ]> <body class="ie8"> <![endif]-->
<!--[if IE 9 ]> <body class="ie9"> <![endif]-->
<!--[if (gt IE 9) ]> <body class="modern"> <![endif]-->
<!--[!(IE)]><!--> <body class="notIE modern"> <!--<![endif]-->
We can then apply CSS specific to a version of IE. For example:
body.ie7 #box {
/* insert IE7 specific CSS here */
}
(Note: Paul Irish’s technique officially has the conditional comments around the html tag, not the body tag. You can use either for these techniques to work. I just prefer using the latter.)
All these Visual Filter recipes depend on the box “having layout”. If you have any difficulty with the Visual Filters activating, set zoom: 1 or a static width inside the IE6-8 specific CSS to force the block to have layout.
Type #1: Simple, Unblurred Shadows
In order to simulate simple, un-blurred box-shadows in IE, we use IE’s DropShadow Visual filter:
#box {
/* CSS for all browsers. */
border: solid 1px #808080;
background: #ffffcc;
margin: 10px;
padding: 10px;
/* CSS3 Box-shadow code: */
box-shadow: 5px 5px 0px #ff0000;
-webkit-box-shadow: 5px 5px 0px #ff0000;
-moz-box-shadow: 5px 5px 0px #ff0000;
}
/* IE6-8 Specific Code */
body.ie6 #box,
body.ie7 #box,
body.ie8 #box {
zoom: 1;
filter: progid:DXImageTransform.Microsoft.DropShadow(OffX=5, OffY=5, Color=#ff0000);
}
There are two exceptions to this solution. The first deals with when the block has a transparent background, and the other has to do with negative box-shadow offsets.
Type #1a: Blocks With Transparent Backgrounds
Let’s say you use the above CSS, but omit the background property:
#box {
/* CSS for all browsers. Note there is no background-color, so box will be transparent */
border: solid 1px #808080;
margin: 10px;
padding: 10px;
/* CSS3 Box-shadow code: */
box-shadow: 5px 5px 0px #ff0000;
-webkit-box-shadow: 5px 5px 0px #ff0000;
-moz-box-shadow: 5px 5px 0px #ff0000;
}
/* IE6-8 Specific Code */
body.ie6 #box,
body.ie7 #box,
body.ie8 #box {
zoom: 1;
filter: progid:DXImageTransform.Microsoft.DropShadow(OffX=5, OffY=5, Color=#ff0000);
}
Doing this will results in some unexpected results in IE6-8. The results in IE7 are as hideous and unreadable as the average YTMND page! In order to fix this issue in elderly IE, one must add a background color in IE6-8 only and remove it with the Chroma filter.
Note: All the other types of box-shadow recipes that follow should also use this Chroma filter method when it is desirable to have a transparent background in the box itself.
Type 1b: Negative Shadow Offsets
If there are negative shadow offsets, you will see a small difference with the position of the box being shadowed:
#box {
/* CSS for all browsers. */
border: solid 1px #808080;
background: #ffffcc;
margin: 10px;
padding: 10px;
/* CSS3 Box-shadow code: */
box-shadow: -10px -5px 0px #ff0000;
-webkit-box-shadow: -10px -5px 0px #ff0000;
-moz-box-shadow: -10px -5px 0px #ff0000;
}
/* IE6-8 Specific Code */
body.ie6 #box,
body.ie7 #box,
body.ie8 #box {
zoom: 1;
filter: progid:DXImageTransform.Microsoft.DropShadow(OffX=-10, OffY=-5, Color=#ff0000);
}
Type #2: Glowing box-shadow
The second box-shadow I use a lot is what I call the “glowing box” effect. This happens when a shadow with a large blur radius is put directly behind a box (i.e. the x- and y-offsets are set to 0, and the blur-radius is a non-zero number). It is possible to simulate this effect in IE using the Shadow filter. This filter must be applied four times (north, south, east and west of the box) in order to simulate the CSS3 effect. Here is the CSS recipe:
#box {
box-shadow: 0 0 5px #666666;
-webkit-box-shadow: 0 0 5px #666666;
-moz-box-shadow: 0 0 5px #666666;
}
body.ie6 #box,
body.ie7 #box,
body.ie8 #box {
zoom: 1;
filter: progid:DXImageTransform.Microsoft.Shadow(Color=#cccccc, Strength=5, Direction=0),
progid:DXImageTransform.Microsoft.Shadow(Color=#cccccc, Strength=5, Direction=90),
progid:DXImageTransform.Microsoft.Shadow(Color=#cccccc, Strength=5, Direction=180),
progid:DXImageTransform.Microsoft.Shadow(Color=#cccccc, Strength=5, Direction=270);
}
Two important caveats about the Visual Filter rules:
As mentioned before, the CSS for IE6-8 uses a lighter color for the shadow. This is due to the way the Shadow filter behaves: it requires a lighter shade to simulate the same effect.
Also he Visual Filters examples are pushed down and to the right compared to the CSS3 example. This is for the same reasons as stated in Type 1b, and a developer would again have to use margins or positioning to get the box in exactly the same place as it is in IE6-8.
You may be able to "cheat" by adding:
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
This will tell IE to render using up-to-date standards, which includes the box-shadow.
However, this is at best a hack and probably won't help much. You should really focus on fixing the bug that's stopping you from properly declaring a <!DOCTYPE>.
The doctype tag is not a replacement for the html tag, you should have both.
If you have only the doctype tag and not an html tag, the markup is invalid. The browser will try to make the best of the broken code, but there are a number of ways that it can misinterpret parts of the rest of the code.
If you have only the html tag and not a doctype tag, the browser will parse the page in quirks mode, which is basically using the oldest standards possible. This will disable some features from newer standards, like CSS3.
If you can't use the HTML5 doctype, you should use one for an older standard, for example HTML 4.01:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
W3C has a list of Recommended Doctype Declarations where you can see the different versions and variations.
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.
I cannot seem to get a border radius no matter what I do. I am running the latest internet explorer and nothing is happening. I have gone into the developer tools and set the rendering to ie9 and it still refuses to read:
border-radius: 4px;
As far as I understand, ie9 does in fact support this CSS3 element. Am I do doing wrong? I am trying to get the browsers to see more or less the same page. Any suggesions? Any help is greatly appreciated!
Try adding some of the following:
border-radius: 4px 0 0 0;
-webkit-border-radius: 4px 0 0 0;
-moz-border-radius: 4px 0 0 0;
Be sure that these items are in the correct css class you are trying to apply to the form element.
I recommend you to define all border properties. Here is an example;
input{
border: solid 4px #06C;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
height: 40px;
width: 100px
}
Here is a working Live Demo, running smooth in my IE9.
Note: Here is a list of browsers supporting CSS3 and others will not.
YOU have a website for create border-radius css code
border-radius : 4px; // for new ie, opera, chrome, firefox
is a new W3C specification for new browser,
if you can use border radius for old browser, you can use
-webkit-border-radius : 4px; // for old chrome, old safari
-moz-border-radius : 4px; // for old firefox
-o-border-radius : 4px; // for old opera version
for old ie version, you want to use CSS3PIE.
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);
}
}
}
i am writing an application using html,css and javascript. i have set border radius of button to have rounded corner but which is not working in opera browser. but same i have tested in chrome it works. please do give some suggestion or help on this. here is demo
Rounded Corner or all browser you want to use folloing method
#divId{
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-o-border-radius: 20px;
}
Its work for me perfectly.
Unfortunately the Border-radius css style is not fully cross-browser supported. Opera is one browser that does not offer support.
See: http://www.westciv.com/iphonetests/
First, did you try -o-border-radius? Second did you try on a plain div? Sometimes form elements reject certain styles. Otherwise it isn't support (opera10 didn't have it).
Border radius in Opera with other demos related to Opera.
button {
background:#000;
color:#fff;
border-radius: 15px;
}
In Opera you can use this:
.className {
-o-border-radius: 3px;
}
I ran into the same problem and found out that although border-radius is supported in Opera, it doesn't quite work with buttons.
But I managed to make it work, and achieved almost the same results. Here's my solution.
Just recreate behavior of the button with following style:
button {
background-color: #ccc;
border-style: outset;
border-color: #eee;
border-radius: 6px;
}
button:hover, button:active, button:focus {
background-color: #ddd;
}
button:active { border-style: inset; }
The thing is, that border-radius works, when you change border-style property. The behavior of Firefox, for example, when you just use border-radius, looks like it's using border-style: outset for normal behavior of button, and border-style: inset, when the button is clicked.
There are only 2 extra lines to make it work in Opera almost the same way as in other browsers.