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.
Related
I'm trying to share some knowledge by posting some css tricks questions(and jquery tricks in another topics) and answer it.
Here I'm dealing with styling the scrollbar for google chrome browser.
Just add these CSS rules:
::-webkit-scrollbar
::-webkit-scrollbar-button
::-webkit-scrollbar-track
::-webkit-scrollbar-track-piece
::-webkit-scrollbar-thumb
::-webkit-scrollbar-corner
::-webkit-resizer
Here's what each rule does:
Here is a simple example of a customized scrollbar using css
::-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);
}
Here is how it will look.
ref: https://css-tricks.com/custom-scrollbars-in-webkit/
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 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
I'm trying to position all images on my webpage behind a log-in screen but I can't seem to make that work. I've tried using z-index but that doesn't help either. I was wondering if anyone can help me sort this out. Here's a screenshot of my issue: http://img64.imageshack.us/img64/1267/uplad.png. I'm trying to make all images stay behind the black image with the log-in screen in front of everything.
CSS
CSS for images
img
{
-webkit-box-shadow: #666 0px 2px 3px;
-moz-box-shadow: #666 0px 2px 3px;
box-shadow: #666 0px 2px 3px;
border: 1px solid #ccc;
float: left;
background-color: #fff;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
z-index:0;
}
CSS for black background
element.style {
height: 1843px;
left: 0;
position: fixed;
top: 0;
width: 1263px;
z-index: 10000;
}
.modalBackground {
background-color: #000000;
opacity: 0.5;
}
CSS for Log-in Screen
element.style {
display: block;
margin-left: -225px;
margin-top: -212px;
}
.pagepopups .popup {
-moz-border-radius: 5px 5px 5px 5px;
-moz-box-shadow: 0 0 3px #333333;
background-color: #006699;
display: none;
left: 50%;
padding: 11px 10px;
position: absolute;
top: 50%;
z-index: 10001;
}
Z-index does appear to be what you want. There is a known z-index bug with Internet Explorer where it doesn't exactly follow the z-index as other browsers. Fortunately, there's an easy fix. You need to specify z-index on parent elements up until the container for all of the elements you're trying to specify a z-index for. I think the problem is that IE creates a "z-index context" for each element unless the parent element has a z-index. Here's a good link describing the issue and how to fix it.
You failed to make the image fully anonymous (Featured on .. button), I Googled for the live site, and it has the issue you're describing, so I'm assuming it's the same version you're working with.
Testing only in IE7:
Add to .header a single rule: z-index: 10000.
That's it fixed in IE7.
It will probably also be fixed in IE6, but if not, let me know and I'll take a look.
You're lucky you didn't anonymise it properly :)
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.