update scroll color to fit darkmode site - html

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.

Related

How to make scrollbar always visible in angular material?

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

::webkit-scrollbar styles not working on DOM elements

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

Custom CSS webkit scrollbar is not working in Firefox brwoser

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.

Chrome scrollbars not appearing, just white gap?

I have an issue where on my page scrollbars aren't appearing in Chrome on a Mac (haven't tried on a PC). It does work okay in Firefox however.
I've tried the following...
::-webkit-scrollbar {
all: unset;
display: block;
}
To no avail

Looks like the expected behaviour to me, idle scrollbars are invisible on macOS, you can try the following to make them always visible.
::-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);
}

ASP.NET Button Text Showing Incorrectly with :Disabled psuedoclass

I have an ASP.Net Webforms page which has several controls on it, including several different sized asp.net buttons. There are certain times when I need to disable a button or buttons on this page, which I am able to do without issue, but the issue is that when I do disable them, the text on the button appears to have a carriage return in the text, making the text appear lower on the button then when the button is enabled. (Please see the image below...Edit, apparently I don't have enough points to post an image.)
The image I wanted to post shows the text of the disabled button aligned at the bottom with half the bottom half of the word missing with the text of the enabled button showing correctly.
Here is the CSS code I am using.
.big, .medium, .med-big, .small, .smaller{
display: inline;
text-align: center;
vertical-align:top;
font-family: 'Oswald',sans-serif;
/*text-shadow: 0 1px 0 rgba(109, 5, 5, 0.8);*/
color:black;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}
.big:active, .medium:active, .small:active, .med-bid:active, .smaller:active{
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 0 rgba(255, 255, 255, 0.4) inset;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 0 rgba(255, 255, 255, 0.4) inset;
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 0 rgba(255, 255, 255, 0.4) inset;
outline: 0 none;
}
.big:disabled, .medium:disabled, .med-big:disabled, .small:disabled, .smaller:disabled{
display: inline;
text-align:center;
vertical-align:top;
font-family: 'Oswald',sans-serif;
color:grey;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
background-color:#CCCCCC
}
.big{
width: 200px;
height: 30px;
padding: 17px 10px 10px 10px;
font-size:24px;
}
I am disabling the buttons through server side code simply by setting the button's Enabled Property to false.
I'm in the process of moving from more of a Winforms developer (of many years) to a web developer, so any help would be greatly appreciated. I also did search the site for an answer to this issue, and although there are several posts regarding CSS styling a disabled, button, I could not find one for this specific issue.
Thanks.