I'm facing some problems to add scrollbar color on safari 14. The webkit works in chrome and edge, but not in safari. There are some threads saying that safari isn't supporting webkit, but if that's true, is there a way to add the color to the scrollbar?
example from w3schools.com,
/* width */
::-webkit-scrollbar {
width: 10px;
}
/* Track */
::-webkit-scrollbar-track {
background: #f1f1f1;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: red;
}
Related
According to all the answers on how to hide scrollbars while allowing scrolling, the standard approach is
.hidescrollbar {
-ms-overflow-style: none; /* Internet Explorer 10+ */
scrollbar-width: none; /* Firefox */
}
.hidescrollbar::-webkit-scrollbar {
display: none; /* Safari and Chrome */
}
But I tried this in Firefox 71 and the style scrollbar-width: none; (which is meant for Firefox) doesn't work. In FF 71 I see the scrollbars show up when the viewport is exceeded.
Something has changed (since FF66+?) and this poster has also raised this issue. His solution is to make the FF scrollbar transparent. But it still takes up space, whereas I need to hide it completely.
Are there any solutions for the latest versions of FF to replace scrollbar-width: none;?
Adding this snippet to both html and body works on Chrome and Firefox!
html, body {
overflow-y: scroll;
scrollbar-width: none;
}
body::-webkit-scrollbar {
width: 0;
height: 0;
}
Chrome version: 87.0.4280.88
Firefox version: 84.0.1
my solution
/* Works on Chrome Version 91.0.4472.106 (Official Build) snap (64-bit), Edge, and Safari */
*::-webkit-scrollbar {
width: 0px;
}
/* firefox is the end
working in version Version 87.0 (64-bit) */
body {
overflow-y: scroll;
scrollbar-width: none;
}
react
"react": "^17.0.2",
"react-dom": "^17.0.2",
Try the below code by hiding the scrollbar by setting its width and background values:
/* make scrollbar transparent */
::-webkit-scrollbar {
width: 0;
background: transparent;
}
.container {
/* IE 10+ */
-ms-overflow-style: none;
/* Firefox */
scrollbar-width: none;
}
.container::-webkit-scrollbar {
/* Safari and Chrome */
display: none;
}
I am trying to add a custom style for only internet explorer but it needs to be different for different screen sizes.
To only target IE I'm using this.
#media screen\0, screen\9 {
.site-logo{
max-width: 150px;
}
}
To then add a browser width I've tried this but it doesn't work:
#media screen\0 and (min-width: 59.6875em){
.site-logo{
max-width: 300px;
}
}
This may be easy but I cannot figure it... thanks in advance
You can use the property IE hacks instead
#media screen and (max-width: 59.6875em) {
.site-logo {
color: red\9; /* IE6, IE7, IE8, IE9 */
/* or this */
color: red\0; /* IE8, IE9 */
/* or this */
color: red\9\0; /*Only works in IE9*/
/* every browsers */
color: red
}
}
<div class="site-logo">text</div>
Changed min to max for demo purposes
I am having a bug I don't understand at all and that I can't find an solution for on the web.
My setup is pretty simple: I'm having a container with various children. The container (marked red in the screenshot) has a fixed height and overflow-y auto. Scrolling works just as expected.
.card-details-container {
height: 500px;
overflow-y: auto;
}
But when I change the opacity of one of the contained children, it is suddenly broken:
.barchart .barchart-bars div {
opacity: .5;
}
I am only experiencing this bug in Chrome (41.0.2272.118). I have no idea why this would be happening. Any help is appreciated!
Try:
/* Theoretically for IE 8 & 9 (more valid) */
/* ...but not required as filter works too */
/* should come BEFORE filter */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
/* This works in IE 8 & 9 too */
/* ... but also 5, 6, 7 */
filter: alpha(opacity=50);
/* Older than Firefox 0.9 */
-moz-opacity:0.5;
/* Safari 1.x (pre WebKit!) */
-khtml-opacity: 0.5;
/* Modern!
/* Firefox 0.9+, Safari 2?, Chrome any?
/* Opera 9+, IE 9+ */
opacity: 0.5;
Also, check the borders.
I am trying to design the scroll bar, for that I have given like
::-webkit-scrollbar {
width: 8px;
background-color: rgba(0,0,0,0);
-webkit-border-radius: 100px;
}
::-webkit-scrollbar:hover {
background-color: rgba(0, 0, 0, 0.09);
}
::-webkit-scrollbar-thumb:vertical {
background: rgba(0,0,0,0.61);
-webkit-border-radius: 100px;
}
::-webkit-scrollbar-thumb:vertical:active {
background: rgba(0,0,0,0.61); /* Some darker color when you click it */
-webkit-border-radius: 100px;
}
This is working fine with Chrome and Safari, I want the same css apply to Firefox; how can I get that?
Using CSS to alter the appearance of the scrollbars is not supported. It alters the appearance of the browser UI elements and for that reason its doubtful it will ever be supported.
You may hide the scrolbar in mozila,
CSS:
#namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
scrollbar{
-moz-appearance: none !important;
}
The article in the Mozilla support forum discussed about "How to hide or disable vertical and horizontal scrollbars?" You can try this link to mozilla support
http://support.mozilla.org/en-US/questions/957337
I changed the placeholder font color of an input field to blue, I've tested it in Chrome, it's color is blue. But in FF 23.0.1, the color is slightly "lighter" than blue.
See the contrast below, note the "Month" is within a span and color is also blue:
In Chrome, it's fine, see below:
However, in firefox 23.0.1, looked like this:
In IE8, not display:
Note the difference of the color.
Below is the css code I am using:
.month_span { color: blue; }
.input::-webkit-input-placeholder { color:blue}
.input::-moz-placeholder { color:blue; } /* FF 19+ */
.input:-moz-placeholder { color:#bbb; } /* FF 18- */
.input:-ms-input-placeholder { color:#bbb; }
My Question:1. Why the color is lighter in FF? 2. How to display placeholder value in IE?
The placeholder attribute isn't supported by IE until IE 10, so that explains that.
Firefox apparently applies opacity:0.54 to the placeholder text:
http://css-tricks.com/snippets/css/style-placeholder-text/
This will fix:
.input::-moz-placeholder { color:blue; opacity: 1; } /* FF 19+ */
.input:-moz-placeholder { color:#bbb; opacity: 1; } /* FF 18- */