I'd like my WebKit scrollbars to have a different color when its container is hovered over. I want the entire scrollbar to light up.
I was thinking something like this would do the trick (but it doesn't):
.scroller:hover::-webkit-scrollbar {
background: green;
}
I've styled the scrollbars the same way: on .scroller, not globally. (That works: .scroller::-webkit-scrollbar) I want the overflowed divs special, not the document.
Another (related) problem: light up the thumb when hovering over the scrollbar. This doesn't work:
.scroller::-webkit-scrollbar:hover ::-webkit-scrollbar-thumb
This is possible using pure CSS, at least with Chrome version 29.
http://jsfiddle.net/eR9SP/
To style the scrollbar when its container (in this case .scroller) is hovered over, use:
.scroller:hover::-webkit-scrollbar { /* styles for scrollbar */ }
.scroller:hover::-webkit-scrollbar-thumb { /* styles for scrollbar thumb */ }
.scroller:hover::-webkit-scrollbar-track { /* styles for scrollbar track */ }
Additionally, you can style the scrollbar thumb itself when it's hovered over or active (being clicked) using the following:
.scroller::-webkit-scrollbar-thumb:horizontal:hover,
.scroller::-webkit-scrollbar-thumb:vertical:hover { /* hover thumb styles */ }
.scroller::-webkit-scrollbar-thumb:horizontal:active,
.scroller::-webkit-scrollbar-thumb:vertical:active { /* active thumb styles */ }
Changing the background color works just fine for me.
http://jsfiddle.net/QcqBM/1
div#container:hover::-webkit-scrollbar {
background: lightyellow;
}
Are you sure there isn't something else wrong with your CSS call?
There's a very easy way to do it -- just add the webkit scrollbar in the CSS using class, then remove it from your element using classList.remove on your element.
A few more details here
Related
I have a little bit problem with the background color of my ngx scrollbar. I not able to change the background color.I have tried modify the css file but this method doesn't work. I leave here a stackblitz for example. enter link description here
Somebody can help me?. I remember that in angular that are a command for change a class in absolute way something like this ":: ngclass " but I m not sure.
Do you mean the scroll bar color or the color of the container of the scroll bars? You could change it by modifying the following variables
ng-scrollbar {
--scrollbar-color: black; /* scroll bars background color */
--scrollbar-thumb-color: yellow; /* scroll bar color */
--scrollbar-thumb-hover-color: red; /* scroll bar hover color */
--scrollbar-container-color: green; /* scroll bars container color */
}
I've modified your Stackblitz
Use css like given below :-
ng-scrollbar {
--scrollbar-color: black;
}
I've worked around and found the working solution. Use the below code snippet to change background color for ngx-perfect-scrollbar (also on hover).
In css/scss,
::ng-deep .scroll-container {
.ps__thumb-y, .ps__rail-y:hover > .ps__thumb-y {
background-color: #209e91;
}
}
In html,
<perfect-scrollbar #perfectScrollBar [config]="config" class="scroll-container" fxFlex="auto" [scrollIndicators]="true"(psYReachStart)="onScrollEvent($event)"
(psScrollDown)="onScrollEvent($event)" (psScrollY)="onScrollEvent($event)">
...
</perfect-scrollbar>
Horizontal ngx-perfect-scrollbar with custom background color
Yesterday I decided to try Polymer 1.0 and I'm already facing difficulties when trying to styling the paper-toolbar.
The documentation says that the background colour can be changed by using:
--paper-toolbar-background
But how can I use it on CSS?
I tried the following:
paper-toolbar {
--paper-toolbar-background: #e5e5e5;
}
Also this:
paper-toolbar {
--paper-toolbar {
background: #e5e5e5;
}
}
But neither worked. What is the correct way to do it?
Thanks.
If you are styling it on your main page, then you have to apply styles using <style is='custom-style'>. This is to make Custom CSS Properties work.
Applying is relatively easy. paper-toolbar provides 2 custom properties and one mixin. --paper-toolbar-background is a property that changes the background color of the toolbar while --paper-toolbar-color changes its foreground color. --paper-toolbar is a mixin applied to the toolbar.
To use these properties is just the same as applying styles in your elements. As an example
<style is="custom-style">
paper-toolbar {
--paper-toolbar-background: #00f; /* changes the background to blue*/
--paper-toolbar-color: #0f0; /* changes the foreground color to green */
--paper-toolbar: {
font-size: 40px; /* Change default font size */
}; /* Notice the semicolon here */
}
</style>
I couldn't find a solution to this problem either until recently. I have two toolbars and I didn't want to change the CSS for all toolbars just the header toolbar.
To change the CSS for every toolbar, in your external css file add the following:
paper-toolbar.paper-toolbar-0 {
background: orange;
color: red;
}
However, that doesn't address the problem. To change a single paper toolbar based on a class like the following:
<paper-toolbar class="header">
...
</paper-toolbar>
The above uses the class called "header" so in my CSS I added:
paper-toolbar.header {
background: orange;
color: red;
}
... and it worked! Yay! That means with this you should be able to override any CSS of any of the other elements doing the same thing. This is completely untested but I think it should work like:
<elementName>.<classname> {
...
}
Hope this all helps!
Is it possible to style a progressbar that reached its max-value differently in CSS than the one that hasn't started yet or is started?
for example doing something like
progress[max=value] {
background: green // color when maxed out
}
progress {
background: red;//default color
}
Or do I have to use Javascript to detect it?
This answer assumes that we know the maximum value of the progress bar. I'm going to use the following markup:
<progress max=100 value=100></progress>
Our progress bar here has a maximum value of 100 and a value of 100, meaning it is at its completed state. From this we can use the [att=val] selector to target it at its completed state:
progress[value="100"] { ... }
Chris Coyier has an article on CSS Tricks which explains how the progress element can be styled in Chrome, Firefox and IE10. Following this we can apply the styling to the completed progress bar. First we reset the style:
progress[value="100"] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
Then we can specifically apply styling to ::-webkit-progress-value and ::-moz-progress-bar to target the foreground progress bar on both Chrome and Firefox. For this I'm setting a background colour of #f00 (red):
/* Chrome */
progress[value="100"]::-webkit-progress-value {
background:#f00;
}
/* Firefox */
progress[value="100"]::-moz-progress-bar {
background:#f00;
}
Finally we can add in the IE10 styling by simply adding a color property on the main selector:
progress[value="100"] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
/* IE10 */
color:#f00;
}
Here is a JSFiddle demo demonstrating this with two progress bars - the first at 50% and the second at 100%. For the lazy, here is the result across Chrome, Firefox and IE10:
I would also like to see some pseudo class for finished state of the <progress> element, because the browser (both Chrome and Firefox on OS X) already knows when it's finished and changes the appearance accordingly.
Unfortunately, the only pseudo class <progress> seems to support is :indeterminate, that is value has not been set.
You can of course use JavaScript and add some class on your own (but you can't even listen for change event on <progress>):
var progress = document.querySelector('progress');
// then somewhere inside a callback
if (progress.value === progress.max) {
progress.classList.add('finished');
} else {
progress.classList.remove('finished');
}
Demo: http://jsfiddle.net/AFzYU/
I am very new to css and Sencha Touch 2. While working on some tutorial on Sencha Touch 2,I see a CSS file having code like
/* Increase height of list item so title and narrative fit */
.x-list .x-list-item {
min-height: 10.5em!important;
height:7.5em;
}
/* Move the disclosure button up to account for the list item height increase */
.x-list .x-list-disclosure {
position: absolute;
bottom: 4.0em;
right: 0.10em;
}
Is .x-list .x-list-item a css nesting concept and x-list a class name?
Also , is this concept purely a CSS concept or Sencha Touch concept?
It's just a pure CSS concept, so this syntax means
.x-list .x-list-item
Select an element with class x-list-item which is nested under element having class x-list
The same goes for second syntax.
If you want to make it more stricter, you can use element.class selector so it will select only if it matches element.class combination, so if taken your example..
Using something like
div.x-list span.x-list-item {
/* This will select span only which is having a class
x-list-item which is nested under div element having class
x-list */
}
how to use custom Scrollbar in firefox?? i am using this but not working..
#-moz-document url("chrome://browser/content/scratchpad.xul"),
url("chrome://stylish/content/edit.xul") {
scrollbar,
scrollbar thumb,
scrollcorner {
-moz-appearance:none!important;
background:none!important;
border:none!important;
min-height:9px!important;
min-width:9px!important;
}
scrollbar thumb {
background:rgba(0,0,0,.2) padding-box!important;
border:1px solid rgba(0,0,0,.6)!important;
border-radius:3px!important;
}
scrollbar thumb:-moz-any(:hover, :active) {
background:rgba(0,0,0,.8) padding-box!important; /* Why doesn't :active work? */
}
scrollbar scrollbarbutton {
visibility: collapse !important;
}
}
Here is an excellent cross-browser scrollbar styler. It actually mimics a scrollbar instead of styling the native browser scrollbar.
http://livepipe.net/control/scrollbar
As far as I know, there isn't a scrollbar element, and you can't style scrollbars with CSS (in Firefox, anyway). Where'd you find out about that element?