I have a div with overflow: auto
.div {
overflow: auto;
}
and when i try to set the styles for the scrollbar, it doesnt work:
.div::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
border-radius: 10px;
background-color: #F5F5F5;
}
.div::-webkit-scrollbar {
width: 12px;
background-color: #F5F5F5;
}
.div::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
background-color: #555;
}
i tryed targeting with class, id, even the tag, but nothing works.
when i don't target anything before ::-webkit-scrollbar styles, the browser scrollbar acquires the styles, but i want to style the div scrollbar
I think you should use one of javascript plugin to display custom scroll bars. Not all browsers support that what you wrote in your question.
custom scrollbars examples
Related
I have a pre that scroll-able
As you can see my site is in a darkmode, and that white scroll is ruined it.
I've tried
pre {
background-color: #323338;
scrollbar-color: #323338 black;
}
somehow it's not taking any effects.
Any hints for me ?
Try # 2
<pre class="syslogs" style="overflow-y:auto; height: 500px;"> {{ $logs }} </pre>
.syslogs {
scrollbar-color: #323338 black;
}
Try this:
::-webkit-scrollbar {
width: 6px;
background-color: #f5f5f5;
}
::-webkit-scrollbar-track {
box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.3);
background-color: #f5f5f5;
}
::-webkit-scrollbar-thumb {
background-color: #323338;
}
You need to add a custom styling for your scrollbars.
Note that it's not going to work across all browsers, but it will let you improve their style in Chrome and Firefox.
I am able to use the transition attribute to make the width of a div change smoothly when switching from mobile to desktop view. I have two separate pages, index and about. When the user goes to the about page, the width of the div increases. I would like to animate this but I am not sure how since they are on two separate pages.
This is for my personal blog, running Apache2. I've tried using the transition element when the a tag is hovered over but this didn't work and looked weird.
div.container {
position: relative;
top: 50px;
width: 350px;
margin: 0 auto;
border-radius: 5px;
background-color: #f5f5f5;
vertical-align: middle;
transition: width 0.25s;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.19);
}
When going to a different html page there is no transition animation.
So currently, I'm using angular material and its default scroll (But I think it is perfect scrollbar) to use as a scroll design to my scroll bar. But the scroll is only showing if the users try to scroll the page/div. I tried to read the scrolling api of the Angular Material but there's no attribute that I can use in here. And I do already put the overflow-y: scroll on the css of course. Any idea? Thanks!
So I found a work around, I need to include pseudo class to my CSS
::-webkit-scrollbar {
-webkit-appearance: none;
width: 7px;
}
::-webkit-scrollbar-thumb {
border-radius: 4px;
background-color: rgba(0, 0, 0, .5);
-webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .5);
}
And if you need it to a specific element or container
.selectionTable::-webkit-scrollbar {
-webkit-appearance: none;
width: 7px;
}
.selectionTable::-webkit-scrollbar-thumb {
border-radius: 4px;
background-color: rgba(0, 0, 0, .5);
-webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .5);
}
Reference:
Making the main scrollbar always visible
Apply webkit scrollbar style to specified element
I have a screenshot of the form (its in pc view) as shown below which I have to replicate in HTML/CSS.
I have created the fiddle for the above screenshot.
Problem Statement:
(1) I am wondering what changes I need to do in the fiddle so that I am able to expand the width of the form as marked by arrow in the screenshot above.
I tried playing with the margin and padding of the form class as shown below but it didn't work.
Whenever I increase the padding of the form, the input fields inside the form seems to go all over the place.
.form {
background: #FFFFFF;
max-width: 360px;
margin: 0 auto 100px;
padding: 45px;
text-align: center;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24)
}
(2) Also, what changes I should make in the CSS, so that I can push the form (as marked with orange sign in the form) little bit towards the bottom.
Give the text input fields a width of 100% then you can use the paddings to control the size of the form elements.
.form {
background: #FFFFFF;
max-width: 360px;
margin: 150px auto 100px auto;
padding: 0px;
text-align: center;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24)
}
input[type="text"] {
width: 100%;
}
Note that I've modified the .form styles a little bit.
Here is my fiddle : SCROLLBAR
Run the fiddle in both Chrome and Firefox browsers, hit the "Toggle" button to see custom CSS not being applied for scroll bar in Firefox browser.
Is there a way I can display the custom scroll bar in all browsers?
::-webkit-scrollbar {
width: 8px;
}
/* Track */
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
-webkit-border-radius: 100px;
border-radius: 100px;
}
/* Handle */
::-webkit-scrollbar-thumb {
-webkit-border-radius: 100px;
border-radius: 100px;
background: #c1bdbe;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
background: #555D69;
}
Any help would be much appreciated.
Thank you.
Firefox doesn't support custom scrollbars yet so there's no way to do this in css.
https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar
You have to use JavaScript to have global style on all browsers.