Can anyone please tell me how to adjust the height of the scrollbar thumb?
I have tried many different things like
::-webkit-scrollbar-thumb {
height: 10px;
}
::-webkit-scrollbar-thumb {
max-height: 200px;
}
::-webkit-scrollbar-thumb {
margin-top: 10px;
margin-bottom: 10px;
}
I have also read this answer Change scrollbar height and How to change the height of a scrollbar thumb? but it didn't work. Some people in the answers said that it is not possible to change the height on the scrollbar thumb then how this site https://css-tricks.com/custom-scrollbars-in-webkit/ is doing it?
My current code is
body {
height: 110vh;
}
::-webkit-scrollbar {
width: 1rem;
}
::-webkit-scrollbar-track {
background: rgb(24, 24, 24);
}
::-webkit-scrollbar-thumb {
background-color: #3EECAC;
background-image: linear-gradient(19deg, #3EECAC 0%, #EE74E1 100%);
border-radius: 1rem;
}
It's not supported on your browser then:
Ask this:
Are you on firefox?
Does the scrollbar change in stackoverflow: Change scrollbar height
(Do the answers scrollbars change?)
::-webkit-scrollbar {
-webkit-appearance: none;
width: 7px;
}
::-webkit-scrollbar-thumb {
border-radius: 4px;
background-color: rgba(0, 0, 0, .5);
box-shadow: 0 0 1px rgba(255, 255, 255, .5);
}
h1 {
font-size: 1000px;
}
<h1>Test</h1>
Related
I made a div that has a scroll function. The scroll bars appear on my desktop browsers (chrome, firefox) but when it comes to mobile, the scrollbar isn't visible.
How can I make this visible all the time?
.scroll_text {
max-height: 250px;
overflow-y: scroll;
padding: 0px 0px;
width: 100%;
max-width: 220px;
height: 100%;
}
.scroll_text::-webkit-scrollbar {
width: 8px;
-webkit-width:8px;
-webkit-appearance: none;
}
.scroll_text::-webkit-scrollbar:vertical {
width: 8px;
-webkit-appearance: none;
}
.scroll_text::-webkit-scrollbar-track {
background-color: #DDE2E5;
}
.scroll_text::-webkit-scrollbar-thumb {
background-color: #c99d5e;
border: 1px solid rgba(92, 92, 92, 0.5);
border-radius: 10px;
}
.scroll_text::-webkit-scrollbar-thumb:hover {
background-color: #000;
}
.scroll_text:hover::-webkit-scrollbar-thumb {
background-color: #c99d5e;
border: 1px solid rgba(92, 92, 92, 0.5);
border-radius: 10px;
-webkit-border-radius:10px;
}
This is an OS-specific setting. I'm not sure where it is on iPhone but on MacOS:
I'm trying to scale the thumb on the scrollbar and I can't change it's with and height also I wanna make it bigger than the scrollbar itself.
I have tried to add transparent borders to making the thumb smaller also adding a left border to show it outside the scrollbar. (first one for default mode and the second for :hover mode)
but it's not working
::-webkit-scrollbar {
width: 20px;
/*it's not helping with showing the thumb border-left*/
overflow: auto;
}
::-webkit-scrollbar-track {
background: linear-gradient(rgba(0, 0, 139, 0.7), rgba(0, 100, 0, 0.8));
overflow: auto;
}
::-webkit-scrollbar-thumb{
background: rgba(255, 255, 255, 0.7);
border-radius: 3px;
/*doesnt work (the goal is making thumb thinner)*/
border: transparent 5px solid;
overflow: auto;
}
::-webkit-scrollbar-thumb:hover{
/*doesnt work (the goal is make it bigger than scrollbar itself)*/
transform: scale(1.5);
border-left: 10px rgba(255, 255, 255, 0.7) solid;
}
<body style="height : 700px;">
</body>
try it yourself here
I expect a scrollbar with gradient background-color and a smaller thumb that when is on hover (:hover) it will get bigger than scrollbar.
can you help me?
To make thumb thinner use: background-clip: padding-box then add some padding to the thumb and this should work fine.
Then to make it wider when hovering remove padding-box by adding: background-clip: initial;
Note that There is no way to make thumb wider than scrollbar
Working Demo:
body {
height: 2000px;
}
::-webkit-scrollbar {
width: 20px;
}
::-webkit-scrollbar-track {
background: linear-gradient(rgba(0, 0, 139, 0.7), rgba(0, 100, 0, 0.8));
overflow: auto;
}
::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.7);
overflow: auto;
border: 5px solid transparent;
background-clip: padding-box;
border-radius: 20px;
transition: height 0.2s ease-in-out;
padding: 5px;
}
::-webkit-scrollbar-thumb:hover {
background-clip: initial;
}
I would like to make my scrollbar pass on my table and not let a space between the window.
My overflow-y: scroll is on a div.
https://image.noelshack.com/fichiers/2019/21/5/1558714720-capture.png
My scrollbar css :
::-webkit-scrollbar {
background-color: transparent;
width: 7px;
height: 7px;
}
/* Track */
::-webkit-scrollbar-track {
background-color: transparent;
}
#board::-webkit-scrollbar-track-piece {
background: rgba(0, 0, 0, 0.15);
}
::-webkit-scrollbar-track:hover {
background-color: transparent;
}
/* Handle */
::-webkit-scrollbar-thumb {
background-color: rgba(186, 186, 192, 0.4);
opacity: 0.4;
border-radius: 16px;
}
::-webkit-scrollbar-thumb:hover {
background-color: rgba(160, 160, 165, 0.85);
}
Do there is a way to do it pls? Seems like it's not really possible with only css but i don't want to use a plugin
Thanks
I was trying to stylize the <progress> HTML element, using a few tricks I picked up online, but I came accross a problem. My CSS should, in theory, set the margin-right and margin-left properties to 10px based on margin: 2px 10px;. However, that is not the case. The <progress> element, which I am trying to style, respects the margin-left, but does not respect the margin-right. Any suggestions?
Code
progress {
display: block;
vertical-align: baseline;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 100%;
height: 14px;
border: 0;
border-radius: 1px;
margin: 2px 10px;
box-shadow: 0 0.5px 1px rgba(0, 0, 0, 0.1), 0 0.5px 0.5px rgba(0, 0, 0, 0.15);
background: #eeeeee;
color: #01579b;
}
/* Foreground - webkit browsers */
progress::-webkit-progress-value {
background: #01579b;
border-top-left-radius: 1px;
border-bottom-left-radius: 1px;
}
/* Background - webkit browsers */
progress::-webkit-progress-bar {
background: #eeeeee;
}
/* Foreground - Firefox */
progress::-moz-progress-bar {
background: #01579b;
border-top-left-radius: 1px;
border-bottom-left-radius: 1px;
}
/* Max value - webkit browsers */
progress[value="1000"]::-webkit-progress-value {
border-radius: 1px;
}
/* Max value - Firefox */
progress[value="1000"]::-moz-progress-bar {
border-radius: 1px;
}
<progress value="450" max="1000"></progress>
You can also check out the relative Codepen I prepared.
Notes
Changing the margin shorthand to individual properties did not make any difference.
Some parts of the CSS stylesheet might be a little bit irrelevant (possibly stuff like the browser-specific styling) or maybe not. I do not exactly know what is causing this problem.
Tested this on Firefox 50 and Chrome 54, same problem in both. I can reproduce the issue both locally and using Codepen and the provided snippet.
You're wrong: it is respecting margin-right. If you use your browser's console/developer tools to inspect the progress bar, you'll see that it does indeed have a margin-right of 10px.
The problem is with width: 100%. A width set to a percentage means "a of containing block's width". You're then adding to that width the margin. So the box that contains your progress bar will be 20px bigger than the containing element would have been, so it will overflow.
Abandon width: 100%: it's rarely necessary. What you want here is width: auto, which for all block elements means "take up as much space as you can within the containing element" and which automatically adjusts for margin.
progress {
display: block;
width: auto;
vertical-align: baseline;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
height: 14px;
border: 0;
border-radius: 1px;
margin: 2px 0px;
box-shadow: 0 0.5px 1px rgba(0, 0, 0, 0.1), 0 0.5px 0.5px rgba(0, 0, 0, 0.15);
background: #eeeeee;
color: #01579b;
}
/* Foreground - webkit browsers */
progress::-webkit-progress-value {
background: #01579b;
border-top-left-radius: 1px;
border-bottom-left-radius: 1px;
}
/* Background - webkit browsers */
progress::-webkit-progress-bar {
background: #eeeeee;
}
/* Foreground - Firefox */
progress::-moz-progress-bar {
background: #01579b;
border-top-left-radius: 1px;
border-bottom-left-radius: 1px;
}
/* Max value - webkit browsers */
progress[value="1000"]::-webkit-progress-value {
border-radius: 1px;
}
/* Max value - Firefox */
progress[value="1000"]::-moz-progress-bar {
border-radius: 1px;
}
<div style="position: relative; margin: 0px 50px;">
<progress value="450" max="1000"></progress>
</div>
You could solve it with div parent, which uses margin instead of progress bar.
progress {
display: block;
vertical-align: baseline;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 100%;
height: 14px;
border: 0;
border-radius: 1px;
margin: 2px 0px;
box-shadow: 0 0.5px 1px rgba(0, 0, 0, 0.1), 0 0.5px 0.5px rgba(0, 0, 0, 0.15);
background: #eeeeee;
color: #01579b;
}
/* Foreground - webkit browsers */
progress::-webkit-progress-value {
background: #01579b;
border-top-left-radius: 1px;
border-bottom-left-radius: 1px;
}
/* Background - webkit browsers */
progress::-webkit-progress-bar {
background: #eeeeee;
}
/* Foreground - Firefox */
progress::-moz-progress-bar {
background: #01579b;
border-top-left-radius: 1px;
border-bottom-left-radius: 1px;
}
/* Max value - webkit browsers */
progress[value="1000"]::-webkit-progress-value {
border-radius: 1px;
}
/* Max value - Firefox */
progress[value="1000"]::-moz-progress-bar {
border-radius: 1px;
}
<div style="position: relative; margin: 0px 50px;">
<progress value="450" max="1000"></progress>
</div>
You can wrap the progress bar with a div and add padding. See:
.wrapper {
display: block;
background: red;
width: 500px;
padding: 10px;
}
progress {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
height: 14px;
border: 0;
border-radius: 1px;
box-shadow: 0 0.5px 1px rgba(0, 0, 0, 0.1), 0 0.5px 0.5px rgba(0, 0, 0, 0.15);
background: #eeeeee;
color: #01579b;
display: block;
width: 100%;
}
/* Foreground - webkit browsers */
progress::-webkit-progress-value {
background: #01579b;
border-top-left-radius: 1px;
border-bottom-left-radius: 1px;
}
/* Background - webkit browsers */
progress::-webkit-progress-bar {
background: #eeeeee;
}
/* Foreground - Firefox */
progress::-moz-progress-bar {
background: #01579b;
border-top-left-radius: 1px;
border-bottom-left-radius: 1px;
}
/* Max value - webkit browsers */
progress[value="1000"]::-webkit-progress-value {
border-radius: 1px;
}
/* Max value - Firefox */
progress[value="1000"]::-moz-progress-bar {
border-radius: 1px;
}
<div class="wrapper">
<progress value="450" max="1000"></progress>
</div>
Apart from all the other ways to solve this, I have also found that using calc() can solve the problem quite easily and without changing but one line from width: 100%; to width: calc(100% - 20px); - some browser-specific prefixing might be required to cover all browsers.
To generalize this solution, replace 20px with the sum of the values of margin-left and margin-right.
progress {
display: block;
vertical-align: baseline;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: calc(100% - 20px);
height: 14px;
border: 0;
border-radius: 1px;
margin: 2px 10px;
box-shadow: 0 0.5px 1px rgba(0, 0, 0, 0.1), 0 0.5px 0.5px rgba(0, 0, 0, 0.15);
background: #eeeeee;
color: #01579b;
}
/* Foreground - webkit browsers */
progress::-webkit-progress-value {
background: #01579b;
border-top-left-radius: 1px;
border-bottom-left-radius: 1px;
}
/* Background - webkit browsers */
progress::-webkit-progress-bar {
background: #eeeeee;
}
/* Foreground - Firefox */
progress::-moz-progress-bar {
background: #01579b;
border-top-left-radius: 1px;
border-bottom-left-radius: 1px;
}
/* Max value - webkit browsers */
progress[value="1000"]::-webkit-progress-value {
border-radius: 1px;
}
/* Max value - Firefox */
progress[value="1000"]::-moz-progress-bar {
border-radius: 1px;
}
<progress value="450" max="1000"></progress>
I've got a problem with my progressbar..
In chrome, the value of the progress bar is red.. I did that with CSS...
But in Mozilla the value of the progress bar is just kinda grey..
progress[value] {
width: 250px;
height: 10px;
}
progress[value] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 250px;
height: 24px;
}
progress[value]::-webkit-progress-bar {
background-color: #eee;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
}
progress[value]::-moz-progress-bar {
background-color: #eee;
border-radius: 5px;
-moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
}
progress[value]::-moz-progress-value {
background-color:#ff0000;
-moz-border-radius: 5px;
background-size: 35px 20px, 100% 100%, 100% 100%;
opacity:0.6;
}
progress[value]::-webkit-progress-value {
background:red;
border-radius: 5px;
background-size: 35px 20px, 100% 100%, 100% 100%;
opacity:0.6;
}
The -moz- value of the progress bar must be red, thanks in advance!
Reference from css-tricks:
"Firefox provides a single pseudo class (-moz-progress-bar) we can use to target the progress bar value. This means that we cannot style the background of the container in Firefox."
Like said, the -moz-progress-bar refers to the value itself, so making it red should make the value as what you wanted. -moz-progress-value doesn't exist.