I am new to pseudo-elements that are prefixed with a double colon. I came across a blog article discussing styling of scrollbars using some webkit only css. Can the pseudo-element CSS be applied to individual elements?
/* This works by applying style to all scroll bars in window */
::-webkit-scrollbar {
width: 12px;
}
/* This does not apply the scrollbar to anything */
div ::-webkit-scrollbar {
width: 12px;
}
In this fiddle, I would like to make the div's scrollbar customized, but the main window's scrollbar stay at the default.
http://jsfiddle.net/mrtsherman/4xMUB/1/
Your idea was correct. However, the notation div ::-webkit-scrollbar with a space after div is actually the same as div *::-webkit-scrollbar; this selector means "scrollbar of any element inside <div>". Use div::-webkit-scrollbar.
See demo at http://jsfiddle.net/4xMUB/2/
I want to use a class selector for using a custom scrollbar.
Somehow .foo::-webkit doesn't work, but I figured out that div.foo::-webkit does work! Those ##$$*## pseudo-things....
See http://jsfiddle.net/QcqBM/16/
You can also apply these rules by id of the element. Let's say scroll bar of a div has to be styled which has an id "myDivId". Then you can do following. This way you can use different styles for scroll bars of different elements.
#myDivId::-webkit-scrollbar {
width: 12px;
}
#myDivId::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
}
#myDivId::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
http://jsfiddle.net/QcqBM/516/
You can have a scss file and apply the style to a class there
style.scss
.myscrollbar {
::-webkit-scrollbar {
width: 13px;
height: 13px;
}
::-webkit-scrollbar-thumb {
background: linear-gradient(13deg, #f9d4ff 14%, #c7ceff 64%);
border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
background: linear-gradient(13deg, #c7ceff 14%, #f9d4ff 64%);
}
::-webkit-scrollbar-track {
background: #ffffff;
border-radius: 10px;
box-shadow: inset 7px 10px 12px #f0f0f0;
}
}
home.html
<div class="myscrollbar">
put your contents here
</div>
I used the scrollbar generator here: https://w3generator.com/scrollbar
Related
I need to customize only the width of the scrollbars of Chrome browser using CSS, but need rest of things (like hover effect, color on hover, scrollbar track color, scrollbar button color etc, color of scrollbar on click etc.) as it is.
How can I do it?
I know that we can change the width of the scrollbar using following css:
::-webkit-scrollbar {
width: 12px;
}
body::-webkit-scrollbar {
width: 1em;
}
body::-webkit-scrollbar-track {
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}
body::-webkit-scrollbar-thumb {
background-color: darkgrey;
outline: 1px solid slategrey;
}
You can do like that
::-webkit-scrollbar is for the entire scrollbar
handle is scrollbar where you can add background like that and apply also pseudo elements or the draggable scrolling handle.
track is the progress bar of the scrollbar.
::-webkit-scrollbar {
width: 5px;
}
/* Track */
::-webkit-scrollbar-track {
background: #1B242F;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #04C2C9;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover{
background: #04C2;
}
For more info visit this link
I currently have a custom scrollbar like below. My page has 5 scrollable elements. How do I only have one scrollbar show up when scrolling that element while hiding the rest?
/*custom scrollbar*/
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background-color: rgba(50, 50, 50, 0.1);
-webkit-border-radius: 8px;
border-radius: 8px;
}
::-webkit-scrollbar-thumb {
-webkit-border-radius: 8px;
border-radius: 8px;
background-color: rgba(50, 50, 50, 0.2);
}
::-webkit-scrollbar-track:window-inactive {
background: transparent;
}
::-webkit-scrollbar-thumb:window-inactive {
background: transparent;
}
You can use the CSS property overflow: auto. This will only show the scrollbars when they're needed
You can hide all scrollbars with:
body { overflow: hidden }
As you indicate 'auto' shows scrollbars if content overflows.
I have never tried it but it may be possible to use JavaScript to get closer to what you describe but I have serious doubts about the ergonomics of such a design.
I have a css code likes
.scrollPanel
{
height: 100px;
width: auto;
position: absolute;
overflow: scroll;
}
You can see my example Here !
What I want to know is how to change the style of scroll bar ?
How can I set css style to it ?
As of now there's no cross browser solution to change the scroll bars with CSS ONLY, alternatively you can use jQuery to style them.
Solution for webkit browsers only
Demo
::-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);
}
Credits
You can complete the webkit solution from Mr. Alien with the styling elements for IE too, but just the colors so far I know.
Here is the documentation about it
As its said before, there are no CSS only solution for all browsers.
All I want to know is if it is possible to have multiple custom made -webkit-scrollbars on the same page.. I making some divs color specific, like one div has green text and images and another blue etc. So I would like to make a custom scrollbar for each div so it matches the color..
Q1: Is it possible?
Q2: If so, how would I do it?
I have thought about one solution, but I think it is a bit cumbersome. One solution may be to make each div containing an iframe and then create separate pages with the unique scrollbars, but I don't know if that is going to work either..
Of course you can - simply prepend the scrollbar pseudo-classes with your intended selectors, i.e.:
::-webkit-scrollbar-track {
background-color: #333;
}
/* Override styles for <div>s, for example */
div::-webkit-scrollbar-track {
background-color: #b13131;
}
I have made a simple example for you here - http://jsfiddle.net/teddyrised/Nsz93/
You can also apply these rules by id of the element. Let's say scroll bar of a div has to be styled which has an id "myDivId". Then you can do following. This way you can use different styles for scroll bars of different elements.
#myDivId::-webkit-scrollbar {
width: 12px;
}
#myDivId::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
}
#myDivId::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
http://jsfiddle.net/QcqBM/516/
It's possible using either a jquery plugin or simply styling the scrollbars w/ css. This can be done in webkit and ie.
::-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);
}
http://jsfiddle.net/jeffpowrs/nEkPw/
http://css-tricks.com/custom-scrollbars-in-webkit/
Here's the solution
div::-webkit-scrollbar {
width: 0.5em;
border-radius: 5px;
}
div::-webkit-scrollbar-track {
box-shadow: inset 0 0 6px #f8fbff;
border-radius: 5px;
}
div::-webkit-scrollbar-thumb {
background-color: #9fa9bd;
border-radius: 5px;
}
I have the following CSS:
box-shadow: inset 0px 0px 2px #a00;
Now I am trying to extract that color to make the page colors 'skinnable'. Is there any way of doing this? Simply removing the color, and then using the same key again later overwrites the original rule.
There doesn't seem to be a box-shadow-color, at least Google turns nothing up.
Actually… there is! Sort of. box-shadow defaults to color, just like border does.
According to http://dev.w3.org/.../#the-box-shadow
The color is the color of the shadow. If the color is absent, the used
color is taken from the ‘color’ property.
In practice, you have to change the color property and leave box-shadow without a color:
box-shadow: 1px 2px 3px;
color: #a00;
Support
Safari 6+
Chrome 20+ (at least)
Firefox 13+ (at least)
IE9+ (IE8 doesn't support box-shadow at all)
Demo
div {
box-shadow: 0 0 50px;
transition: 0.3s color;
}
.green {
color: green;
}
.red {
color: red;
}
div:hover {
color: yellow;
}
/*demo style*/
body {
text-align: center;
}
div {
display: inline-block;
background: white;
height: 100px;
width: 100px;
margin: 30px;
border-radius: 50%;
}
<div class="green"></div>
<div class="red"></div>
The bug mentioned in the comment below has since been fixed :)
No:
http://www.w3.org/TR/css3-background/#the-box-shadow
You can verify this in Chrome and Firefox by checking the list of computed styles. Other properties that have shorthand methods (like border-radius) have their variations defined in the spec.
As with most missing "long-hand" CSS properties, CSS variables can solve this problem:
#el {
--box-shadow-color: palegoldenrod;
box-shadow: 1px 2px 3px var(--box-shadow-color);
}
#el:hover {
--box-shadow-color: goldenrod;
}
You can do this with CSS Variable
.box-shadow {
--box-shadow-color: #000; /* Declaring the variable */
width: 30px;
height: 30px;
box-shadow: 1px 1px 25px var(--box-shadow-color); /* Calling the variable */
}
.box-shadow:hover {
--box-shadow-color: #ff0000; /* Changing the value of the variable */
}
You could use a CSS pre-processor to do your skinning. With Sass you can do something similar to this:
_theme1.scss:
$theme-primary-color: #a00;
$theme-secondary-color: #d00;
// etc.
_theme2.scss:
$theme-primary-color: #666;
$theme-secondary-color: #ccc;
// etc.
styles.scss:
// import whichever theme you want to use
#import 'theme2';
-webkit-box-shadow: inset 0px 0px 2px $theme-primary-color;
-moz-box-shadow: inset 0px 0px 2px $theme-primary-color;
If it's not site wide theming but class based theming you need, then you can do this: http://codepen.io/jjenzz/pen/EaAzo
A quick and copy/paste you can use for Chrome and Firefox would be: (change the stuff after the # to change the color)
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
-border-radius: 10px;
-moz-box-shadow: 0 0 15px 5px #666;
-webkit-box-shadow: 0 0 15px 05px #666;
Matt Roberts' answer is correct for webkit browsers (safari, chrome, etc), but I thought someone out there might want a quick answer rather than be told to learn to program to make some shadows.